Guide to image sizes when editing

All the images below are in the horizontal/vertical ratio 1.5:1 - eg 150px wide X 100px high. Ideal widths are marked for each size below, but the ratio is the key element to ensure they will all resize to fit the block they are in.

Important points to note about image sizes and resizing...
  • On your website, the code automatically resizes images to best fit the device or screen size being used. However, any images that are either far too small, far too large or not in the expected proportions may not appear as you wish. We strongly suggest that you pre-prepare images to the right size ratio and approximate measurements here in pixels before uploading to get the best results.
  • On smaller screens (tablets and phones), half-width and triple images will expand to full width.
  • Be aware that on smaller screens the left half of the screen will always reposition to be above the right half.

Half-width image - use anywhere you want either two images side by side or half image/half text (either as here or text and image reversed).

The image here should be approx 350px wide. This snippet is in the basic (default) section of the drag and drop system.

This snippet (two vertically arranged images with text beside) is in the Photos section of the snippet library. It allows for a margin between the two images. Use same size as for above half-width image.

Above is for a single full-width image. As a guide, this one should be 900px wide and the same ratio as all the others. This snippet is in the default part of the drag and drop system.

Above is for anywhere you want three images together abreast on the page. they will resize to fit this template. As a guide, the three images above are all 200px wide but it is best to allow for their expansion on smaller screens with a width of approx 350px. This snippet is in the Photos section of the drag and drop system.

Contact us...

Call Nick Gray on 07369 282408

Email -

Interface Websites

Website designed and built by Interface Websites