[Resolved] Delete padding on featured images

[Kia]

Hi there,

I’d like to delete the padding around my featured images.

Desktop
On desktop, I’d like to delete padding-left and padding-top so that this looks like this. Example post: https://www.atlasandboots.com/travel-that-changed-roz-watkins.

Mobile
On mobile, I’d like to delete padding left, top and right.

As the padding is created by the container, I’m not sure how to delete it short of adding minus-padding on the image which of course isn’t particularly elegant. Do you have any ideas please?

Thank you,

Kia

[David]

Hi there,

try adding this CSS:

@media(min-width: 769px) {
    body.single-post .inside-article .page-header-image-single {
        margin-left: -40px;
        margin-top: -40px;
    }
}

@media(max-width: 768px) {
    body.single-post .inside-article .page-header-image-single {
        margin-left: -30px;
        margin-right: -30px;
        margin-top: -30px;
    }
}

[Kia]

Hi David,

Thank you. That worked really well.

However, there is one problem. On the mobile version of our main blog page and archive pages, the featured image now has a margin on the right-hand side (see image).

I presume I need to apply a -30px margin to fix this but I’m not sure what’s the best the best class to target. Can you help please?

Thank you,

Kia

[David]

The CSS i provided only applies to the Single Post – Can you disable your cache plugin so i can see whats happening ?

[Kia]

Thanks, David.

I’ve deactivated WP Rocket so you should be able to see the problem now. We’ve been making a few changes to the site so it may be that something else has caused it but I’m pretty sure we haven’t changed anything image related.

Thank you,

Kia

[David]

Try adding this CSS to fix that:

@media(max-width: 768px) {
    .one-container.right-sidebar.post-image-aligned-center .no-featured-image-padding .post-image {
        margin-right: -30px;
    }
}

[Kia]

Perfect. Thank worked. Thank you!

[David]

You’re welcome

[Author]

Posts