White space below header and metadata font

• 

  thedepthofnow · Member · Nov 24, 2017 at 7:02 am

  • Copy link
  • Add topic to favorites

  Hello!

  I have two questions:
  How can I reduce the space between my header and my posts? There seems to be this big gap and I know that whitespace is important to the design but the gap is a little too big for me.

  How can I can the font of the metadata and project type?

  Thanks for your help.

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

• 

  robertghetau · Staff · Nov 24, 2017 at 10:07 am

  • Copy link

  Hi there,

  In order to reduce the gap between the header and this CSS snippet will do the trick:

  @media screen and (min-width: 768px) {
   .entry-thumbnail {
      padding-bottom: 25px;
   }
  }

  Just to be sure, by metadata, could you tell me which elements are we after?

  Best wishes,
  Robert

• 

  thedepthofnow · Member · Nov 24, 2017 at 12:31 pm

  • Copy link

  Hi! Thank you for getting back to me. The font I would like to change is the blog date, categories, tags and the titles of the project types if possible :)

• 

  thedepthofnow · Member · Nov 24, 2017 at 12:35 pm

  • Copy link

  Hello Robert,
  The code you gave above doesn’t work on my site :( Any other possibilities?

  Thanks for your help.

• 

  robertghetau · Staff · Nov 24, 2017 at 2:25 pm

  • Copy link

  Hey,

  The code above should go in the Custom CSS area if you have at least a Premium plan bought: https://wordpress.com/pricing/

  Could you tell me if you have one?

  Regarding the fonts, those can be changed via some CSS code, but only with one of the ones set in the Fonts section. (Can I use web fonts in CSS?)

  Alternatively, you can also add your own font via a plugin if you own a Business plan.

  Let me know how it goes.

  Robert

• 

  kathrynwp · Staff · Nov 24, 2017 at 4:38 pm

  • Copy link

  The code you gave above doesn’t work on my site :( Any other possibilities?

  I don’t see the code Robert gave you in your custom CSS. Try re-adding it and let us know.

  Regarding the font, you can only use fonts you’ve selected in the Customizer’s Fonts panel. Right now you’ve chosen Sorts Mill Goudy and Lato.

  All of the following elements are currently using Lato:

  • blog date
  • categories
  • tags
  • titles of the project types

  Would you like to switch them to using Sorts Mill Goudy instead?

  Robert – you can see Martina’s custom CSS by using a browser inspector. Here’s a link to the latest revision:

  https://s1.wp.com/?custom-css=1&csblog=56E5o&cscache=6&csrev=307

• 

  robertghetau · Staff · Nov 24, 2017 at 4:41 pm

  • Copy link

  Awesome!

  Thank you for sharing that info, @kathrynwp! :-)

• 

  thedepthofnow · Member · Nov 24, 2017 at 11:29 pm

  • Copy link

  Thank you both for the help. I tried the code again and it works but it is not the code I am looking for. I don’t think I explained myself right. I would like a smaller gap between the logo at the top and the beginning of the content whether it is an image like in my blog or the text of a page. Beneath my logo there looks like there is large gap :) I hope that explains it.

  I will stay with the fonts as is :)

• 

  robertghetau · Staff · Nov 25, 2017 at 6:26 am

  • Copy link

  Oh, I see. Thank you for clearing that out.

  Currently the padding on the primary div is set to 85px so this CSS code should do the job:

  @media screen and (min-width: 1150px) {
   #primary {
      padding-top: 0;
   }
  }

  If you want that spacing to apply to all the screens just remove the @media screen .. { } part and it should look like this:

  #primary {
      padding-top: 0;
   }

  Let me know how it went.

  Cheers,
  Robert