Inspiro front page header image height

Themes Inspiro
#1

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

#2

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

Cheers

#3

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.

#4

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
#5

That worked well for me, might have to resize the header image but it is the first code-solution that helps. Than You https://dev.avesaltus.se
Regards Berit-Sweden