Reducing white space with free Theme

• 

  shannonphx · Member · Sep 22, 2018 at 5:32 am

  • Copy link
  • Add topic to favorites

  Hoping someone can help.
  I want to reduce the white space above and below the header image.
  See pink arrows on screenshot here:
  https://drive.google.com/file/d/1-IpVmbTMXFby8VJVEnYHbcIpgBPzhdx1/view?usp=sharing

  I don’t know how to code. Can someone please tell me what code to use & where/how to install the code?

  Thank you!!!

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

• 

  testingchanel · Member · Sep 22, 2018 at 1:05 pm

  • Copy link

  Hi there,

  To reduce the white space above and below the header image, you need to use Custom CSS which is a feature of WordPress.com Premium and WordPress.com Business plans.
  https://wordpress.com/pricing/
  If you have either one of these plans, then you can custom design in free as well as in Premium theme: https://en.support.wordpress.com/themes/.

  CSS for adding space above the header image, add margin-bottom property and add value whatever you want

  
  .site-header {
        margin-bottom: -40px;
  }
  

  Below the header image, adjust value of margin-bottom according to your need.

  
  img {
      height: auto;
      max-width: 100%;
      vertical-align: middle;
      margin-bottom: -100px;
  }
  

  Hope this helps!
  Thanks.

• 

  shannonphx · Member · Sep 22, 2018 at 6:47 pm

  • Copy link

  Thanks so much for responding!
  I had a feeling I’d need to upgrade to a paid plan to modify it — Bummer!