Reducing Height of Header Image

• 

  nextleapipo · Member · Apr 7, 2017 at 8:39 am

  • Copy link
  • Add topic to favorites

  Hi, I wanted to reduce the height of the header image/banner at the front page.

  Currently I’m using Perennial theme.

  Please advise me how to do it.

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

• 

  garysixtyeight · Member · Apr 7, 2017 at 9:22 am

  • Copy link

  Hi there,

  Please try using the custom css below.

  The vh value (viewport height) can be changed to suit your preference. 70vh means the image will be 70% of the viewport/browser height

  .site-hero-wrapper {
      height: 70vh;
  }

• 

  otpidusprime · Member · Apr 7, 2017 at 10:06 am

  • Copy link

  @nextleapipo,
  Just a little change i want to suggest to the CSS code provided by @garysixtyeight.

  You can also set a min-height so that the height of the header image stops shrinking at a certain point, otherwise it will keep on shrinking and shrinking(when you reduce the browser window height) to mess up the layout on mobile devices(specially when they are in landscape mode).

  Here’s the updated CSS code:

  .site-hero-wrapper {
      height: 70vh;
      min-height: 300px;   //change this value according to your need.
  }

  Using this code, the height of the header image will keep on shrinking if you reduce the browser window height and stop shrinking when the height of the header image has reached 300px.

• 

  garysixtyeight · Member · Apr 7, 2017 at 10:12 am

  • Copy link

  @otpidusprime: good point about landscape, thanks for the addition :)

• 

  otpidusprime · Member · Apr 7, 2017 at 10:28 am

  • Copy link

  @garysixtyeight, glad i could contribute :)

• 

  nextleapipo · Member · Apr 7, 2017 at 11:19 am

  • Copy link

  Hi Gary. Thank you for your response. Love it.

• 

  nextleapipo · Member · Apr 7, 2017 at 11:21 am

  • Copy link

  @otpidusprime Thank you guys. Nice info.

• 

  otpidusprime · Member · Apr 7, 2017 at 12:26 pm

  • Copy link

  @nextleapipo glad we could help :)