How to fix mobile banner image aspect ratio issues?

Store Design

Topic summary

Mobile banner image on a Shopify site retains the desktop aspect ratio on small screens, cropping top and bottom. Initial CSS hid one of two banner media elements via nth-child and breakpoints, but the image still cropped. A suggested fix to add a mobile-only min-height override for .banner__content in theme.liquid (targeting the section ID) did not resolve the issue.

Resolution: Use separate desktop and mobile banner blocks, each controlled by CSS media queries (i.e., rules that apply based on screen width). The desktop banner is hidden below ~967px width, and the mobile banner is hidden at 968px and above, ensuring the correct image displays without unwanted cropping.

Outcome: The author reports the approach works and considers the issue fixed. No further action items or open questions remain.

Summarized with AI on January 1. AI used: gpt-5.
1

Hello lovely people,

I have added both desktop and mobile banner images to the same banner block, and added this CSS to the block, which kind of works:

.banner__media-half:nth-child(1) {
left: 0;
right: auto;
width: 100%;
}
@media (min-width: 750px) {
.banner__media-half:nth-child(2) {
display: none;
}
}
@media (max-width: 749px) {
.banner__media-half:nth-child(1) {
display: none;
}
}

The problem is that when I squash the browser to mobile view, the banner image sticks at the same aspect ratio as the desktop image, cropping off the top and the bottom. The mobile image is of course taller than the desktop one.

I read in another post that adding this to theme.liquid (but with my section id) fixes it, but it doesn’t seem to work for me:

@media screen and (max-width: 749px){ #shopify-section-template--22152022491417__image_banner_nq7af3 .banner--large:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content { min-height: 69rem; } }

This is the website I’m working on: https://mrinappropriate.co.uk/

Thank you so much for your help!

Cheers,

Dan

2

Thank you so much, I’m not very good with code, can you please tell me how I could do this? Thank you!

3

Thank you so much for helping me out with this, but I semi-accidentally got it working using this CSS attached to the desktop banner block:

@media screen and (max-width: 967px) {
{
display: none;
}
}

And this one attached to the mobile banner block:

@media screen and (min-width: 968px) {
{
display: none;
}
}

Thank you so much for your help though, greatly appreciated!!

Cheers,

Dan