removing gap between header image and body text

• 

  kats2015 · Member · Jan 20, 2016 at 1:46 pm

  • Copy link
  • Add topic to favorites

  Hi,
  we are using the mina olen theme for this blog. There is a gap between the header image and the body text (white space / thin grey line / headline text). Similarly, this gap exist above the footer of this site.

  I am not familiar with CSS customization and do not exactly know if this can be solved with a change in the CSS code we used to customize the header image.

  Thanks for any help.

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

• 

  thesacredpath · Member · Jan 22, 2016 at 9:32 pm

  • Copy link

  Hi, this theme really wasn’t intended to have a header image that had to shrink as the window/screen became narrower, and this presents a pretty big challenge and requires a lot of Media Queries to adjust things. Paste the following in at the very bottom of your custom CSS.

  #main, .home #header {
  	border-bottom: none;
  }
  .home .content article:first-of-type {
  	padding-top: 0
  }
  @media screen and (max-width: 1900px) {
  	body.custom-header #header {
  		max-height: 400px;
  	}
  }
  @media screen and (max-width: 1600px) {
  	body.custom-header #header {
  		max-height: 350px;
  	}
  }
  @media screen and (max-width: 1400px) {
  	body.custom-header #header {
  		max-height: 300px;
  	}
  }
  @media screen and (max-width: 1200px) {
  	body.custom-header #header {
  		max-height: 250px;
  	}
  }
  @media screen and (max-width: 1000px) {
  	body.custom-header #header {
  		max-height: 220px;
  	}
  }
  @media screen and (max-width: 800px) {
  	body.custom-header #header {
  		max-height: 200px;
  	}
  	#site-title img {
  		display: none;
  	}
  }
  @media screen and (max-width: 600px) {
  	body.custom-header #header {
  		min-height: 150px !important;
  	}
  }
  @media screen and (max-width: 500px) {
  	body.custom-header #header {
  		min-height: 110px !important;
  	}
  }
  @media screen and (max-width: 400px) {
  	body.custom-header #header {
  		min-height: 80px !important;
  	}
  }

  See what you think with this and make sure and view on a phone and tablet, both in portrait and landscape orientations.