Horizon changing hero only on phone

Technical Q&A
1

I want to change the height of the picture in the hero section to 80%. When I do this, the hero itself doesn’t get smaller (its called the container I think?). It leaves blank space with the ‘shop’ text. How do I make the whole section smaller on the phone only? Can someone help me?

2

Could you please share your store URL and password (if applicable) so that I can take a look and provide you the solution code?

Looking forward to hearing back from you.

Best,

Daniel

3
4

Put this code into this sections “Custom CSS” setting:

@medaia (mx-width:749px) {
  .hero {
    --hero-min-height: calc(80svh + var(--hero-height-offset)) !important;
  }
}

This value is 100svh by default which means entire screen height (on mobile it accounts for auto-hiding address line).

5

Thanks for sharing the store url.

If you want to change the height for the mobile then you have to follow these steps.

Go to Shopify Admin >> Online Store >> Themes >> Edit Code >> styles.css

In the end of styles.css paste the following code.

@media only screen and (max-width: 767px) {
 .hero {
  --hero-min-height: 75svh !important;
}
}

If this was helpful mark as Solution and Like it.

Thanks