[Resolved] Featured Image Margin Space and Removal on Mobile

[Eric]

Hi,

My setup is pretty simple. I am using the featured image on the post with left justification but I cannot seem to find a way to adjust the spacing for the top, right and bottom. From inspecting the CSS with Developer Tools in Chrome, I see that the margin is set at 2em but from a few separate containers.

I found help on other topics where I can overwrite the margin-right but no example for top and bottom.

Also, on mobile for the archives, I simply want to remove the image. Is this better done with a hook?

Thanks

[Leo]

Hi there,

Can you guide me to the page where the issue can be seen?

Let me know 🙂

[Eric]

Certainly. The padding around the featured image.
https://dividendearner.com/when-do-you-sell-a-stock/

I wanted to make it flush to the text on the top and reduce the right and bottom.

For the second part, it’s the following list on mobile.
https://dividendearner.com/articles/

[Leo]

Try this CSS for the featured image:

.post-image-below-header.post-image-aligned-left .inside-article .featured-image {
    margin-top: 0.5em;
    margin-top: 0.5em;
    margin-top: 0.5em;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

And remove archive featured image on mobile:

.blog .post-image, .archive .post-image {
    display: none;
}

[Eric]

That’s perfect! Thanks so much for the work.

[Leo]

No problem 🙂

[Author]

Posts