Magazine Pro Theme – Changing Padding Around Header Just on Mobile

[valhalla202]

Hi forum,

For my website (www.hiddendominion.com) I have extended the header (using CSS) to 1140x170. I think the original size is somewhere around 315x100.

The website looks fine on desktop. However, on mobile the padding and extra white space above and below the header is horrendous. It takes up practically the entire first view.

So what I am looking to do is delete the padding and "clickable" white space above and below the header, just on mobile.

I know I'm working in media queries for this... But unsure of what exact code to use. Any suggestions? Thanks!!

http://www.hiddendominion.com

[bluebird]

Hi @vallhalla,

Try getting adjusting these properties in mobile view with media queries:

.header-image .site-title a {
     ////////get rid of the min-height property

}

.header-image .site-header .title-area{
////lessen the padding of the top/bottom///
  padding: 20px 0px;
}

.primary-nav .site-header {
  ///adjust margin-top according to view-port size//////
  margin-top: -20px;
}

See if that helps:-)

Juliette

[valhalla202]

Thanks Juliette!

Do you happen to know what media size I should put it under? like @media only max width: 1023px or a lower one?

Sorry for the confusion!

[bluebird]

You're welcome Valhalla!

If everything else seems to be sitting well at the tablet and desktop view breakpoints, then (assuming that this is not a mobile first design) I would try using a max-width of 414px. That should cover most mobile phones.

Cheers,

Juliette

[valhalla202]

So I took your recommendation and it worked awesome thus far! Strictly on mobile and I got rid of the padding and the top white space.

I have one follow-up question - So I was able to raise the picture close to the top navigation bar as recommended here:

.primary-nav .site-header {
  ///adjust margin-top according to view-port size//////
  margin-top: -20px;

However, I can't seem to figure out how to now raise the secondary navigation to be up toward the header image.

I tried this:

.site-header .secondary-nav {
		margin-top: -100px ;

And changed the margins and the various nav-secondary. Also tried putting it as ".secondary-nav .site-header" and even just trying "secondary nav" but can't seem to get that dang thing to move up there!

Any ideas? Also - thanks so much for the other help, like I said worked like a charm! 😀

[bluebird]

I think that you forgot to get rid of the header-image .site-title a min-height property:-)

[valhalla202]

Ahh I left out the "a" after the code. Right after I put that in it worked perfect.

You're a miracle worker! It looks awesome. Thanks so much!

[bluebird]

You're welcome! I like to help out when I can.

Cheers:-)

[Author]

Posts