Canvas Theme Padding WordPress

Jayaram Y comments:

Hey Alan,

Use this in your css file for mobile device.

@media only screen and (max-device-width: 480px) {
#header{
height: inherit;
}
}


If you already have a mobile devices media queries, use

#header{
height: inherit;
}


Jayaram Y comments:

Hey Alan,

By using above code, the screen looks like this

http://www.awesomescreenshot.com/image/143403/5aad500b45226293e2fcb4dc6d45089f

alanhudson comments:

http://www.responsinator.com/?url=www.alanhudson.net

It seems to be ok without it - but not on my phone. Very confused (I've tried clearing cache)

Jayaram Y comments:

Check in other phone and see. It might be cache in your phone.

alanhudson comments:

No - still get a gap on Ipod

alanhudson comments:

my code

@media only screen and (min-device-width : 320px)
and (max-device-width : 480px) {
body {background-image:none!important;}
#header {width:auto;background-size:contain;
background-position:center;height:inherit;padding:0!important;}
}

Jayaram Y comments:

I see that you are using some w3 totla cache plugin for your site. Can you please clear cache from backend and check again.

Jayaram Y comments:

replace it with this. And also please clear your site cache from w3 total cache plugin.

@media only screen and (min-device-width : 320px)
and (max-device-width : 480px) {
body {background-image:none!important;}
#header {width:auto;background-size:contain; height:inherit;}
background-position:center;height:inherit;padding:0!important;}
}


alanhudson comments:

Brilliant - you win :)

Jayaram Y comments:

cool :) Also can you replace the below line. Once replaced, clear cache from backend. While you make css changes, you need to clear cache.
#header {width:auto;background-size:contain; height:inherit;}
with
#header {width:auto;background-size:contain; height:inherit !important;}