Space between site title/tagline and page content with homepage title hidden

• 

  joncam · Member · Apr 12, 2020 at 5:48 pm

  • Copy link
  • Add topic to favorites

  Hello!
  I am using the Varia theme with Barnsbury child theme.

  I have hidden the page title of my static homepage using CSS:

  .home .entry-header {
  display:none;
  }

  With this hidden, the space where the page title should be is still the same size. This means that there is a space between the site title/tagline and the start of the page content.

  How can I make this space smaller?

  The website is http://www.gardeningforwellbeing.org

  I have literally just setup the site and blocked areas out, so have added random text!

  Thanks
  Jon

• 

  777sean · Member · Apr 12, 2020 at 6:30 pm

  • Copy link

  Hi @joncam

  Is the area i marked with an arrow in the screenshot the one which you want to make smaller?
  If yes you need to add
  margin-bottom: -30px; to the css class called site-header (you can adjust the number to your priority)

  

  Kind regards

• 

  joncam · Member · Apr 12, 2020 at 6:44 pm

  • Copy link

  Hi 777Sean,
  yes it is.

  Really appreciate your solution.

  Many Thanks

  Jon

• 

  joncam · Member · Apr 12, 2020 at 9:41 pm

  • Copy link

  If you add:

  margin-bottom: -30px

  to the section in the console in Chrome, it moves the content upwards. Adding the same text to the style sheet does not fix the issue however. So there must be rules in the stylesheet overriding this simple change.

  The issue is the box sizing of the main DIV content. The box sizing is set to inherit and uses ::before and ::after. There is a margin or space between the header and body, and also the body and footer.

  /**
  * Relax the definition a bit, to allow components to override it manually.
  */
  *, *::before, *::after {
  box-sizing: inherit;
  }

  I don’t understand where the ::before and ::after is getting the specified spacing from elsewhere in the stylesheet. I don’t know enough about CSS to sort.