Site logo

Archived topic

Featured Image adjustments?

3 replies · Started by ammgbr on January 11, 2022

Viewing posts 1–4 of 4

I have not yet managed to get the homepage featured image to display properly. It either does not occupy the full width of the screen or when I reupload it only partially uploads with areas missing. Is it possible to adjust the featured image with CSS?

Hi there,

The image isn't going full width because it's being restricted by the site's default max-width of 1200px.

You can try bypassing that on the homepage by adding this cSS:

body.home .featured-image.page-header-image.grid-container.grid-parent {
    max-width: 100%;
}

body.home .featured-image.page-header-image.grid-container.grid-parent img {
    width: 100% !important;
    height: auto;
    object-fit: cover;
}

Edited: Apologies, I thought it worked. On desktop it is sorted but the featured image is not responsive on mobile

Edited: Apologies, I thought it worked. On desktop it is sorted but the featured image is not responsive on mobile

Can you provide a mockup image of how you want it to be laid out on mobile? So we can write the appropriate @media rule for it. :D

This archived topic is closed to new replies.