Shorten Height of Slider Images

• 

  holycowranches · Member · Feb 1, 2017 at 5:36 pm

  • Copy link
  • Add topic to favorites

  Hello, Can I get CSS to shorten the height of my slider images to look more like this?

  https://ezabcinc.wordpress.com/

  Thank you!

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

• 

  staff-loquaciousloon · Staff · Feb 2, 2017 at 3:22 pm

  • Copy link

  Hi @holycowranches!

  The challenge here is that the heights are being set inline by the theme – so we have to use some less-than-ideal CSS to get around that.

  This should be close to what you have in mind:

  @media screen and (min-width: 1045px) {
  #featured-content, #featured-content article, .fc-contain {
     height: 500px !important;
  }
  
  #previous-slide-controller, #next-slide-controller {
  	top: 250px !important;   
  }
  
  .wf-active #featured-content .entry-title {
      font-size: 52px;
  }
  
  .wf-active #featured-content .entry-summary {
      font-size: 20px;
  }
  }

  It only targets larger screens, as it gets hard to fit the content on smaller screens if you shorten the slider too much. It also reduces the font sizes so the text isn’t as likely to get cut off.

  Let me know what you think!

• 

  holycowranches · Member · Feb 3, 2017 at 6:36 pm

  • Copy link

  That looks amazing! Just what I had in mind! Thank you so much again!!!

• 

  staff-loquaciousloon · Staff · Feb 6, 2017 at 1:33 pm

  • Copy link

  You’re welcome!