Mobile Header Height

You have the following code in your custom CSS

.site-header{padding-top:0.2em;padding-bottom:0;height:295px !important}

This is also applying to the mobile version of the site. To fix this, we can target any screen widths larger than 568px wide with the following CSS instead

@media screen and ( min-width: 568px ) { .site-header{padding-top:0.2em;padding-bottom:0;height:295px !important} }

Thank you sir. That totally fixed my problem. Your help is very much appreciated.

Hi Bigrsh!

I have the same problem with the header on mobile and tablet? Can you help me too?
My website is https://www.goshopia.com

Hi @gallegoara, what issue are you seeing exactly? Looking at the mobile version of your site the header looks normal to me.

If you have a different kind of issue or more complex, please create your own thread here:

https://www.ads-software.com/support/theme/storefront/#new-post

Thanks!

Hi Jarret!
It takes a lot of space. Check on tablet to see what I mean. Half of the screen goes to the header.

Thanks a lot for your help Jarret!

@gallegoara you have the following set in your custom CSS

.site-header {
     height: 28%;
}

What exactly were you trying to target with that code?

It also looks like possibly Elementor has added 382px of padding to the top of the site causing such a large empty space under the header at certain browser widths.

If you can create a new thread using the link I provided in my first response to you, I can try to help further. Otherwise, the initial thread creator keeps getting an email each time a reply is made here.