Photolia header help

• 

  jimgrey · Member · Jul 17, 2014 at 11:09 am

  • Copy link
  • Add topic to favorites

  In the Photolia theme, is there CSS that controls how much space appears above the header menus and image? I’d like to shrink that space if possible, to “raise the fold” on the page.

  The blog I need help with is: (visible only to logged in users)

• 

  rachelmcr · Member · Jul 17, 2014 at 3:28 pm

  • Copy link

  Hi Jim,

  Yep! That space is controlled by CSS in your theme that sets a margin above the content on the page. Here’s the default CSS your theme is using:

  @media only screen and (min-width: 641px)
  #container {
  width: 90%;
  margin: 3em auto;
  }

  If you’re interested, I found that CSS using the method described on this page: How to Find Your Theme’s CSS

  The first line of that CSS (starting with “@media only …”) makes it so the CSS is only applied when you’re using a browser that’s at least 641 pixels wide. In smaller browsers (for example on a tablet or a phone) there’s no space above the menu. You can learn more about that part of the CSS, called a “media query,” here: Using Media Queries with Custom CSS

  The part that actually defines the margin is this line:

  margin: 3em auto;

  An “em” is a unit of measurement in CSS that’s linked to font size. The “3em” part applies to the margin at the top and bottom of the page, and the “auto” part means that a margin will automatically be applied to the left and right sides of the page.

  Here’s an example of the CSS you could use to make that margin smaller:

  @media only screen and (min-width: 641px)
  #container {
  margin: 1em auto;
  }

  You can change that margin to get the amount of space just where you want it. You can even switch to another unit of measurement, like pixels, if you’d like. Just let me know if you have any questions about that! :)

• 

  jimgrey · Member · Jul 17, 2014 at 4:02 pm

  • Copy link

  Thank you so much for your detailed reply and for schooling me a little on how to self-serve on this kind of thing!

  When I played with that margin attribute in the Web Inspector, I changed it to 0 and immediately the top and bottom margins disappeared. This is exactly what I want.

  But when I go into Customize CSS on my blog and enter the following CSS and save, it doesn’t change the margin. Am I doing something wrong?

  @media only screen and (min-width: 641px)
  #container {
  margin: 0em auto;
  }

• 

  rachelmcr · Member · Jul 17, 2014 at 4:19 pm

  • Copy link

  Oops, I goofed a bit with that code — sorry! It was missing a couple curly brackets to deal with the media query. This code should do the trick:

  @media only screen and (min-width: 641px) {
  #container {
  margin: 0em auto;
  }
  }

  Let me know if that works out better for you. :)

  And if you like working with CSS and want to get more tips and advice, we have some expert staff and volunteers who enjoying helping out over in our CSS Customization forum:

  https://en.forums.wordpress.com/forum/css-customization

• 

  jimgrey · Member · Jul 17, 2014 at 4:28 pm

  • Copy link

  Those pesky brackets! That did it. Thanks so much!!

• 

  rachelmcr · Member · Jul 17, 2014 at 4:36 pm

  • Copy link

  You’re very welcome!