CSS to change header size on Organization theme page

• 

  mjellefson · Member · Jul 9, 2014 at 6:26 pm

  • Copy link
  • Add topic to favorites

  Hello, I tried searching for this answer, but I’m new to this forum and wasn’t quite sure where to look.

  I’ve successfully hidden my featured image from a few page headers, but now there’s a weird white space there. How do I change the size of the header in CSS?

  This is for the Organization theme.

  Thanks again!
  Lauren

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

• 

  thesacredpath · Member · Jul 9, 2014 at 10:41 pm

  • Copy link

  Hi Lauren, I’m not seeing any extra white space on the site you reference. Can you point me to a location where this is occurring?

• 

  designsimply · Member · Jul 16, 2014 at 12:01 pm

  • Copy link

  I found this page is one where you’ve hidden the featured image using CSS:
  http://mattellefson.com/contribute/

  And this is the CSS you used:

  .page-id-93 .feature-img.page {
  	visibility: hidden;
  }

  I also see that you added this to adjust the height of the visibility:hidden element:

  .page-id-93 .feature-img.page {
  	height: 50px;
  	width:940px;
  	margin:7px 9px 0
  }

  When you use “visibility: hidden,” it actually leaves the space for the block element in place, so if you use that then adjusting the height of the element as you have done is one possible workaround. The other elements in the 2nd example above aren’t needed though, just the height.

  The solution you have will work just fine. However, here’s another similar solution to do the same thing with a little less code:

  .page-id-93 .feature-img.page {
  	display: none;
  }
  .page-id-93 .container {
  	padding-top: 70px;
  }