Reducing Height of Header Image
-
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)
-
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; } -
@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.
-
-
-
-
-
- The topic ‘Reducing Height of Header Image’ is closed to new replies.