Twenty Seventeen: reduce space before and after page titles?

• 

  manuschwendener · Member · Apr 30, 2017 at 8:53 am

  • Copy link
  • Add topic to favorites

  Hi

  I’m using

  h2.entry-title, h1.entry-title,  h1.page-title {
  	font-size: 1.25rem !important;
  }

  Now I’d like to reduce the space before and after the titles, for example “Willkommen” on https://ubblogtest.wordpress.com, “Kategorie: Kooperationen” on https://ubblogtest.wordpress.com/category/kooperationen.

  Thank you :-)

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

• 

  otpidusprime · Member · Apr 30, 2017 at 9:09 am

  • Copy link

  Hello @manuschwendener,
  Use these CSS to:
  Reduce spacing before and after the title:
  i. for “Willkommen”

  .entry-header {
      margin-top: -2em;   /*before*/
      margin-bottom: 2em !important;   /*after*/
  }

  ii. for “Kategorie: Kooperationen”

  .page-header {
      margin-top: -2em;   /*before*/
      margin-bottom: 0em !important;   /*after*/
      padding-bottom: 1em;   /*after*/
  }

  Hope this helps 🙂

• 

  manuschwendener · Member · Apr 30, 2017 at 11:31 am

  • Copy link

  Thank you, otpidusprime, working very well! :-)

  For .page-header I changed it to padding-bottom: 3.5em, now it’s exactly what I was looking for.

• 

  otpidusprime · Member · Apr 30, 2017 at 12:12 pm

  • Copy link

  @manuschwendener you’re welcome 🙂

• 

  manuschwendener · Member · May 4, 2017 at 6:38 am

  • Copy link

  PS: I added

  @media screen and (min-width: 480px) { 
  
  }

  around the code, so it won’t affect mobile (which looks better with the default).

• 

  otpidusprime · Member · May 4, 2017 at 8:37 am

  • Copy link

  @manuschwendener
  you used media query for .page-header or .entry-header or both?

• 

  manuschwendener · Member · May 4, 2017 at 8:53 am

  • Copy link

  Both – probably only would need one? If yes: which one?

  Before, if I set the values to -2em to look good on desktop there was too little space above the titles on mobile. (I can revert it to let you look at it, if you’d like).

• 

  otpidusprime · Member · May 4, 2017 at 10:18 am

  • Copy link

  If you do not want the CSS of both the pages “Willkommen” & “Kategorie: Kooperationen” to effect on phone then use both codes.

  Otherwise use only the code of the page that you do not want on phone.

• 

  manuschwendener · Member · May 4, 2017 at 10:59 am

  • Copy link

  I think it looks best with your code for larger screens and the default for mobile. Thanks again :-)

• 

  manuschwendener · Member · May 4, 2017 at 11:00 am

  • Copy link

  (I added the PS in case somebody finds this thread via search and wants to copy the code.)

• 

  otpidusprime · Member · May 4, 2017 at 11:03 am

  • Copy link

  @manuschwendener aaahh is see. That’s a good idea.
  and
  You’re welcome again! 🙂