Venue - Sections - Learn why your images may be cropped

On Venue some sections which allow background images such as ‘Slideshow’ and 'Image grid with text' are using a piece of code called ‘background cover’, which is very widely used in responsive web design and on many Shopify themes. This means the image will adapt to whatever device it is being viewed on and at whatever orientation, vertical or horizontal. So on a desktop it might show your image as a wide landscape ratio but on a mobile phone as a tall portrait ratio.

However we do recognise that if you use an image with a piece of embedded text or a false button this ‘cover’ method may cause cropping issues. For instance if you have added some text on the top left of a wide image, it may be cropped on a mobile device. The same if you have the focus/subject of your image far left or right.

Solutions

In these cases we suggest the following:

• Use the section called 'Image slideshow' which will respect the original ratio of your image
• Try using the heading, text and button fields built into the 'Slideshow' and 'Image grid with text'section as these will move and resize as your image moves but will always remain visible and clickable. They are also much more SEO friendly and using text direct on top of an image can easily become unreadable, too small and fuzzy on a mobile device.
• Try to use images with more of a pattern or lifestyle feel so as to be more sympathetic to all devices from desktop to mobile.
• Try to make the main focus/subject of your images near the centre as these will not get cut off.

Image sizes

Please see the related article linked below to learn more about image sizes.