Large Gap After Header (Mobile)


#1

I’m not sure if this happens on Android devices, but for iOS (tested on iPod, iPhone, and iPad), there is a large gap after the header (on every page) that I would like to remove. My site is http://www.alinatrang.com/


#2

Hi,

You can fix that with custom css code below:

@media (max-width: 768px) {
    div#header-banner {
        background-size: cover !important;
    }
}

Best Regards


#3

That almost fixed the issue. The only thing left is that now my header image is zoomed in too closely. Is there a CSS fix for that or specific header image size I should use?


#4

Hi,

It cannot be scaled in other way for mobile, background-image does not support such scaling, you can only add it like this in order to be more cross browser compatible:

@media (max-width: 768px) {
	div#header-banner {
		background-size: cover !important;
		-webkit-background-size: cover !important;
		-moz-background-size: cover !important;
		-o-background-size: cover !important;
		background-size: cover !important;
	}
}

Best Regards


#5

Oh, I see. Thank you. In that case, one last question: is there a way to turn off the mobile theme?