margin on pages/header

• 

  elderfamilymatters · Member · Mar 29, 2017 at 2:15 am

  • Copy link
  • Add topic to favorites

  I have been sent here by the helpline to sort out my margin issues

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

• 

  siobhyb · Member · Mar 29, 2017 at 5:09 pm

  • Copy link

  Hi @elderfamilymatters. :)

  I can see from your past interactions that you’re attempting to replicate the look of the header found at elderfamilymatters.co.nz.

  That will be very tricky to achieve using only CSS and, so, to begin with I’m interested in knowing whether you’re settled on your current theme (Twenty Sixteen) or if you’d be open to changing it? If you changed it to a theme that more closely matches up the layout you’re after, it’ll then be easier to tweak using CSS.

  Lodestar and Shoreditch are both examples of themes that have headers that take up 100% of the available space by default. You can get a feel of how your blog would look with those themes active here:

  https://lodestardemo.wordpress.com/news/

  https://shoreditchdemo.wordpress.com/blog/

  If you want to keep Twenty Sixteen, the following snippet can be added to the CSS panel of the WordPress.com Customizer to increase the width of the header:

  .site-content, .site-footer {
      max-width: 1320px;
  }
  
  .site-inner {
      max-width: none;
  }
  
  #masthead {
      padding: 0;
  }

  Please test the above across a few different devices (including a mobile).

  Hope that helps.