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} }
Thread Starter
bigrsh
(@bigrsh)
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 http://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://ww.wp.xz.cn/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.
