Hello, I’m running into an issue on the Horizon 3.1 theme where I have colored bars on top and bottom of my homepage on mobile (the area where the Dynamic Island and search bars are on iPhone). I would like the background image on my homepage to extend to fill these areas. On other pages with solid color backgrounds, those areas are covered. Including a screenshot with the areas marked that I would like the background image to fill.
Your idea and vision is nice but a website cannot override the browser look or the phone display, so your background can’t get to those areas, let me know if you need any assistance.
Thanks for the response. It seems to work fine on other pages with a solid color. Is it just the image that’s a problem?
Even the variant options and text have no problem filling that space on my product pages.
I believe the culprit is here:
It uses svh units – one of the “Small viewport units”
See <length> - CSS | MDN
… small viewport-percentage units are “safer” to use in general, but might not produce the most attractive layout …
Try lvh or dvh instead by adding this to the Hero section “Custom CSS” setting:
.hero {
--hero-min-height: 100dvh !important;
}
Thanks for the suggestion but there is no effect using that code with either lvh or dvh. Interestingly, if I set the value to higher than 100 it does fill the bottom border area but also pushes all my content down. The bar at the top remains.
Colors could align but image as a background won’t extend to those areas.