Surf Page Image Dimensions

Note: The default size is the smallest images should be, if you are wanting to optimise for large screen sizes you can times the default by two but ensure that the optimise tick box is checked before uploading.

Column Dimensions

The below images show the dimensions of the columns and rows in the immerse level grid system. Using these dimensions, it is possible to design graphics to fill a given region within the grid.

Each image shows the grid in a different configuration, one, two, three, four or five columns. The height of a line remains 20px in all cases, but the width of the columns and gutters varies, as indicated by measurements shown. 

Note that you may wish to increase the graphics to 150% or 200% of the size required (file size depending) to ensure they look as sharp as possible on high-definition displays. These larger graphics will be scaled down to fit.

See these dimensions in action on our Dimensions for Designers doc.

One Column:

Two Columns:

Three Columns:

Four Columns:

Five Columns:

Mobile dimensions

Did this answer your question?