Images cut off on header sliders

My images on the header sliders look perfect in edit mode and on my iPhone, but are being cut off at the bottom on safari, etc. See here …

Hello there,

I know it is very problematic, but technically it is normal. The slide image is actually a background image that covers the entire slide area. The image size is always fixed, but the slide container isn’t – it adapts with the screen height. So we applied cover background size as it’s the most appropriate way among other options. Quoted from MDN article:

Cover background scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). The image "covers" the entire width or height of the container. When the image and container have different dimensions, the image is clipped either left/right or top/bottom.

It looks like you want the particular part of the image (bottom side) to be the content the visitor should see. I’d suggest you to prepare a new image and move the main content a bit up, so when on smaller screen it will be visible.


Thanks Kharis

I’ll try that. SYDNEY is a revolution in web design and functionality for developers and non-developers alike. I know nothing about CSS, but with a little application I always find a way in SYDNEY to achieve what I need to do - without any code at all. That, and the beautiful design, is what makes this so brilliant.

Thanks you & your colleagues