Banner Image is cut off, different to what was shown on preview

Store Design
1

Image banner is cut off despite it being not in preview.

1st pic: In view store mode, heads are cut, not how I want it.

2nd pic: How Shopify says it looks before clicking view. How I want it.

How it looks viewing the website
How it looks viewing the website1598×806 97.5 KB

How preview looked/how I want it
How preview looked/how I want it1418×585 172 KB

1 Like
2

(depending on the theme version, the behaviour may differ from the mentioned below)

When you’re setting the ‘Banner height’ in section properties it sets the height of your banner but its width can change with the browser window resize.

Image proportions (aspect ratio) are not maintained and some cropping will occur as the result.

In your screenshots, the first one is obviously made in a wider window.

To maintain aspect ratio there is an ‘Adapt to first image’ option, but it only properly works for single image.

For two images they are shown 2 times taller, this may still work in your case, so worth trying).

Otherwise, there is still a way to fix this if your section settings have “Custom CSS” setting at the bottom.

Add this code there:

.banner__media-image-half {
    object-position: center 25%;
}

The images will still be cropped, but it will keep the heads visible. You may try changing 25% to your liking.

By default it’s set to 50%, meaning that the same amount will be cropped at the top as at the bottom.
Suggested 25% means it will crop more from the bottom and less from the top.

If you set it to 0% it will only crop from the bottom.

3

I am having the same issue in the Studio theme with a main single image. I’m not seeing anywhere to set ‘Adapt to first image’ option. Can you tell me how you do that?

4

What section you’re using?
“Image banner” has “Banner height” setting, “Slideshow” has “Slide height” in section settings.

5

Hey Tim, I’m pulling my hair out here.

I have seen that it’s possible to have 2 different images for both Desktop and mobile banner, which I have. The issues I am having is with Desktop. No matter the size of the banner image on Desktop when using a laptop or narrower screen the sides are getting chopped off. I have changed the sizes multiple times and am having the same problem every time. Is there something that can be done so that the banner automatically fits/shrinks/zooms to window?

Thanks in advance.