controling padding around featured images in category pages.

Hi there,

i don't fully understand the requirement, can you share a link to the archive and maybe a screenshot of what you're trying to do ?

This is for mobile view.

tried to set padding manually on post-image but didn't work.

Thanks.

https://staging.funeralcircle.com/category/saying-goodbye/obituaries/

On mobile view. the spacing around the featured image

1. In Customizer > Layout > Container you can adjust the Content Separator to adjust the space above and below the image.
2. If you want to have the image span the width of the viewport then in Customizer > Layout > Blog -> Featured images, you can uncheck the Display Padding around Featured Image.

3. And finally to ensure your 350px wide image fills the entire width of the container or the viewport ( if #2 is enabled ). Then you can add this CSS:

@media(max-width: 768px) {
    .resize-featured-image .post-image img {
    min-width: 100%;
    }
}

Thanks for your response.

For 1. As said the spacing with the content separator will be limited at some point by the image margin/padding. Even if i set the content separator spacing to 0, i'm still having this large space around the image.

For 2. this can be applied to posts, but i'm looking to set the spacing in the category pages (archive.)

Update: It's possible to set the space with css. I wasn't sure about that, but apparently you have to select the class and the parent class.

In this case .inside-article .post-image (top margin didn't work), so i had to set the space on .inside-article .entry-header on the top.

But something essential like this should be able to be set within the customizer.

You can use this CSS to strip or set the margin of the image and the excerpt:

@media(max-width: 768px) {
    /* Set margins of post image */
    .post-image-below-header.post-image-aligned-left .inside-article .post-image {
        margin-top: 0;
        margin-bottom: 0;
    }
    /* Set top margin of excerpt */
    .site-content .post .entry-summary {
        margin-top: 0;
    }
}

Thanks for these.

I'm marking this thread as resolved.

Glad to be of help.