Banner Image Smaller

• 

  pagestaltcenter · Member · Nov 11, 2016 at 6:32 pm

  • Copy link
  • Add topic to favorites

  I’d like to make my banner image smaller, is that possible? thanks!

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

• 

  thesacredpath · Member · Nov 12, 2016 at 11:24 am

  • Copy link

  Hi, the featured image height is controlled by a top and bottom padding. Add the following to your custom CSS and adjust the 120px value as desired.

  .hero.with-featured-image, body[class*="front-page"] .hero {
      padding: 120px 0;
  }

• 

  pagestaltcenter · Member · Nov 12, 2016 at 11:17 pm

  • Copy link

  Thanks!

• 

  pagestaltcenter · Member · Nov 12, 2016 at 11:33 pm

  • Copy link

  Hmm I just noticed this makes all of the banner images smaller on all pages. Is there a way I can just the banner size on just my home page? Thanks!

• 

  thesacredpath · Member · Nov 14, 2016 at 4:35 pm

  • Copy link

  Yes, we can limit it to the home page by using the “home” CSS class in the opening body HTML tag.

  .home .hero.with-featured-image {
      padding: 20px 0;
  }

• 

  pagestaltcenter · Member · Nov 27, 2016 at 1:00 am

  • Copy link

  Do i replace .home .featured-page .entry-summary {
  display: none; with .home .hero.with-featured-image { padding: 20px 0; }?

  Thanks!

• 

  thesacredpath · Member · Nov 28, 2016 at 10:46 pm

  • Copy link

  Replace the rule I had given you with the one that starts with .home

  Sorry, add this rule instead of the first one I had given you.

• 

  pagestaltcenter · Member · Nov 29, 2016 at 12:55 am

  • Copy link

  This worked, thanks!

• 

  thesacredpath · Member · Nov 29, 2016 at 5:35 pm

  • Copy link

  Hooray and you are welcome!