Archived topic

Featured Image Margin Space and Removal on Mobile

5 replies · Started by Eric on August 10, 2020

Viewing posts 1–6 of 6

August 10, 2020 at 8:38 pm #1396390

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

August 10, 2020 at 9:08 pm #1396404

Hi there,

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

Let me know :)

August 10, 2020 at 9:12 pm #1396407

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/

August 11, 2020 at 8:35 am #1397361

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;
}

August 11, 2020 at 9:48 am #1397486

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

August 11, 2020 at 10:23 am #1397525

No problem :)

This archived topic is closed to new replies.

Start building better websites today.