Gateway Theme home page layout

• 

  woodhamilton · Member · Jul 5, 2016 at 3:05 am

  • Copy link
  • Add topic to favorites

  Using the Gateway theme and I have uploaded the Header image, but I need to scroll down to see the tabs. I would like to size the page so that the tabs appear directly under the image without scrolling.

  the site we’re talking about https://pizwee.wordpress.com/ ?

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

• 

  hallluke · Member · Jul 5, 2016 at 8:41 am

  • Copy link

  Your site is set to private so I can’t tell exactly but looking at the Gateway demo site, and depending on the size of main image you’ve used, you can reduce some of the spacing between the logo, title, site description and button at the top of the page.

  Try these bits out to mess with the spacing to get it how you would like, I’ve included some new values based on the demo:

  @media only screen and (min-width: 50em) {
  	.site-branding {
  		padding-top: 1em;
  		padding-bottom: 1em;
  	}
  	.hero-section {
      margin-top: 0.5em;
  		margin-bottom: 1em;
  	}
  	.hero-section .hero-content {
      padding-top: 1em;
  		padding-bottom: 1em;
  	}
  }
  
  .hero-section .hero-title {
  	margin-bottom: 0;
  }

• 

  woodhamilton · Member · Jul 10, 2016 at 9:00 pm

  • Copy link

  Thank you very much for the information. unfortunately, the sizing changes are not consistent, when I update @media only screen and (min-width: 50em) to 79em, the tabs appear too far up the page yet when I enter 80em it drops too far down.

• 

  thesacredpath · Member · Jul 11, 2016 at 5:36 am

  • Copy link

  @woodhamilton, you can use decimal numbers, so try things like 79.2em, etc. In some instances, 1em can be a huge amount and in others a small amount since it is a relative measurement.

  You can also try things like 79.25em, etc.