On Venue some sections which allow background images such as ‘Slideshow’ or ‘Image 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.
In these cases we suggest the following:
- Try using the heading, text and button fields built into the theme sections 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.
We do understand this ‘cover’ method may not be ideal in every case but we feel on balance this is the best way to handle certain web images in this multi-device world.