Ask your WordPress questions! Pay money and get answers fast! (more info)

Canvas Theme Padding

  • SOLVED

Probably quite simple, but I can't find out how to do it....

Can someone tell me how to reduce the space between the header and the H1 Title on mobile devices (i'm looking on an Iphone 6)? I'd also like it and the sidebar a bit further up on the desktop too

Site is [[LINK href="http://www.alanhudson.net"]]www.alanhudson.net[[/LINK]]

Thanks

Answers (5)

2015-04-26

Jayaram Y answers:

To reduce the spce between logo and title on mobile device. use the below code in your css

#nav-container{margin-bottom: 0;}

For sidebar to move up on desktop you can give this code in your css.
#sidebar{margin-top:-40px;}


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;}

2015-04-26

Navjot Singh answers:

Use this

#nav-container {margin-bottom: 0em !important; }

You can change this quantity accordingly.

to bring up the sidebar and reduce the distance.


alanhudson comments:

Thanks - that works for desktop but main issue is Iphone (see below)