Inspiro front page header image height

Hi all,
I’m using the amazing Inspiro theme and I would like to reduce the home page image header height.
I’ve tried everything :

  1. adding a new image to the library and cropping it → did not work since it zooms on the image and keeps the same height as before
  2. looked up on the web for some solutions and found different customized CSS to add → none of them worked for me

a) ```
img.wp-image-70 {
max-height:250px;
object-position: 0 10%;
object-fit: cover;
}


b)```
.home .page-header{
height: 50vh !important;
}

c) .home .page-header{ height: 600px !important; } .carousel .page-header { min-height: unset !important; }

Is there any solution I could use?

Thanks,

Lod

Anyone? I thought it was a “community forum” :slight_smile:

Cheers

Hi @xhinsy

Sorry for the late response.

Try this CSS code:

@media screen and (min-width: 48em) {
    .inspiro-front-page.has-header-image .custom-header-media, .inspiro-front-page.has-header-video .custom-header-media {
        height: 800px;
        height: 70vh;
    }
}

.has-header-image.home.blog .custom-header, .has-header-image.inspiro-front-page .custom-header, .has-header-video.home.blog .custom-header, .has-header-video.inspiro-front-page .custom-header {
    height: 70vh;
}

Add in the Customizer > Additional CSS and you can also change values as per your needs.

Hi Pavel, thanks for you answer and sorry for my late response too.
I’ll have a try this evening with the suggested solution and will repost the result.
Cheers

1 Like