Minimize margins in Twenty Sixteen

• 

  alsporrer · Member · Aug 17, 2016 at 3:34 pm

  • Copy link
  • Add topic to favorites

  Hey!! Having a great time setting up my space so far with twenty sixteen. Just a few things I’d like to change if possible.

  When using a header image, the first feature article is below the fold. I’d like to minimize the white space by moving everything up.

  That said, is it possible to move the header image above the site title and tagline and reduce the top and bottom margins? As well as the top and bottom margin on the Primary menu?

  In sum, make the margins smaller and ideally place the header image as high as possible/ followed by the site title and tag line/ followed by the primary menu/ followed by the posts to get everything as high up the page as possible. Thanks so much for the assistance!

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

• 

  hallluke · Member · Aug 17, 2016 at 9:43 pm

  • Copy link

  You can cut down on the white space to tighten things up vertically using the following code, it doesn’t affect the theme when it switches to the tablet or mobile optimised layout – I’ve left those as they are:

  @media screen and (min-width: 61.5625em) {
    #masthead {
      padding-top: 1em;
    }
    .site-branding,
    .site-header-menu,
    .header-image {
      margin: 0.5em 0;
    }
  }

  For the second option you could try something like this (although it might not work in some browsers like IE8 and lower):

  @media screen and (min-width: 61.5625em) {
    #masthead {
      display: table;
      padding: 1em 4.5455%;
    }
    .site-header-main {
      display: table-footer-group;
    }
    .header-image {
      display: table-header-group;
    }
  }

• 

  hallluke · Member · Aug 17, 2016 at 9:45 pm

  • Copy link

  Wait, forget that second option. Use a flexbox method instead:

  @media screen and (min-width: 61.5625em) {
    #masthead {
      display: flex;
      flex-direction: column;
      padding: 1em 4.5455%;
    }
    .site-header-main {
      order: 2;
    }
    .header-image {
      order: 1;
    }
    .site-branding,
    .site-header-menu,
    .header-image {
      margin: 1em 0;
    }
  }

• 

  alsporrer · Member · Aug 17, 2016 at 10:19 pm

  • Copy link

  That looks awesome! Thank you!!

  Anyway you can move the widget side bar up to the same height as the site title? I think we’ll be groovy after that!

• 

  hallluke · Member · Aug 18, 2016 at 7:22 am

  • Copy link

  Try this, on wide screens it will jump up and be level with the header on the left, as soon as the screen shrinks too much it will drop down below to the original position and slide under the menu (try resizing your browser window to see what I mean):

  @media screen and (min-width:1360px) {
  	#secondary {
  		position: relative;
  		top: -178px;
  	}
  }