Hero image css for desktop and mobile

[tannie]

I am trying to reformat my mobile hero image banner to show the full image (horizontal, like 16:9) instead of being the same height as desktop or whatever it is as default. I tried looking at other posts but didn’t find a working solution. I would think that I can change the code here in hero.liquid, probably the media-screen and min-width line, but I’m not sure what to add so that the hero image looks how i want it to. I am using the Horizon theme.

How it looks on desktop:

How it looks on mobile:

How I want it to look on mobile:

[AnneLuo]

Hi @tannie
Can you share your store url?

[tannie]

https://txf851-xj.myshopify.com/ pass: onaost

[keirawilson]

Hello @tannie
On mobile, the hero image height in Horizon is usually controlled by a fixed min-height or aspect-ratio, not the min-width media query itself.

To show the full image on mobile (closer to 16:9), you’ll want to override the hero container styles only for small screens.

You can try something like this in your theme CSS:
screen and (max-width: 749px) {
.hero__container {
min-height: auto;
aspect-ratio: 16 / 9;
}

.hero__container img {
object-fit: contain;
}
}

Key points:

• aspect-ratio controls the banner shape on mobile

• object-fit: contain prevents cropping

• Keeping this inside a mobile media query avoids affecting desktop

If the theme sets height inline, you may also need to remove or override that specific rule. This approach usually works without editing hero.liquid directly.

[tannie]

[tannie]

it did not seem to apply to the site

[AnneLuo]

Hi, @tannie
You can add css below in your file.

@media screen and (max-width: 767px) { 
    #Hero-template--21017657344259__hero_jVaWmY {
        min-height: 275p !important;
    }
}

Results:

Hope this helps! If yes then Please don’t forget hit Like and Mark it as solution!

[Dan-From-Ryviu]

@tannie

onaost

Please add this code to Custom CSS in Theme settings

@media (max-width: 749px) {
.hero { 
    min-height: fit-content !important; 
}
.hero__image, .hero__video, .hero__video-poster {
    height: fit-content !important;
    object-fit: contain !important;
}
}

Best regards,
Dan from Ryviu: Product Reviews App

[tannie]

I’m not 100% sure but it seems like it is fixed