Hero overlay mobile horizontal

[Chris_Schumann]

Hello Community,

I’m new to Webflow and having some trouble fixing a design problem. Maybe some of you had a similar problem or know a solution.

My Hero Overlay works fine on every screen and also in the designer but when I flip the website on my phone to horizontal it’s squeezing together. I already tried to change from vh to 100% or even px but I can’t see any changes.

Thanks in advance and best regards,
Chris

[JimF (Jim Forbes)]

We can’t diagnose the issue from looking at your live site. We need a read-only file >>

[Stan (justAnotherDeveloper)]

hi @Chris_Schumann this happened because you have set hero-section to 60vh. So there is no surprise that is taking 60% of available space and shrinks. It can be solved several ways depend what you need.

1. set element height in absolute units as eg. px and change its value in viewport when needed
2. write custom MQ for landscape

Simple example

@media screen and (orientation:landscape) {
   /* Your CSS Here*/
}

Article with these basic CSS are over all internet.

[Chris_Schumann]

i fixed the problem, it can get closed or deleted. thanks

[Stan (justAnotherDeveloper)]

Hi @Chris_Schumann happy to see you have been able to find problem and fix it. Sorry that my response wasn’t helpful.

Have a nice day