[bobgarrett]

I am struggling with how a featured images works on our web site’s home page which has worked well until now but we wish to modify it.

ccrc.co.uk

We like how the featured image works and is handled as the page is scrolled or resized for different screen sizes.

However, we want to reduce the height of the featured image so that the content below is higher up. Having created a new image with the same width (in pixels) but less high (fewer pixels) we replaced the existing image but the image was expanded to the same height as before, only showed the centre of the image and was therefore also blurred.

How can we make it work with an image that is not as high?

[sujeet]

Hello @bobgarretthomenetworks-co-uk,

Please try adding the following padding value and adjust it as needed. The height of the image is controlled by the padding, so you can increase or decrease the values to achieve the desired height.

Please add the following CSS to Dashboard > Appearance > Customizer > Additional CSS:

@media only screen and (min-width: 64em) {
   .has-header-media.header-media-text-disabled .wp-custom-header {
   padding: 230px 50px !important;
 }
}

Let me know if this works for you or if you need any further adjustments.

Thank you!

Regards,
Sujeet

[bobgarrett]

That is terrific. Thank you so much.

[sujeet]

You’re very welcome! Glad I could help.

[Author]

Posts