tweaking featured image padding on mobile

Hi there,

What would you like to do?

The left and right padding are from the container setting so cannot be altered without changing the entire container padding:
https://www.screencast.com/t/wsjZgGGFQ5

It was above and below the featured image on mobile that I want to reduce.

Thanks

Hi there,

i found a potential fix for your mobile overflow issue:

https://generatepress.com/forums/topic/mobile-width-issue/#post-1354938

And you may as well combine the CSS like so with the fix for the featured image spacing:

@media (max-width: 768px) {
    .pt-cv-colsys {
        margin-left: 0;
        margin-right: 0;
        max-width: 100%;
    }
    .post-image-below-header.post-image-aligned-center .inside-article .featured-image {
        margin-top: 1em;
        margin-bottom: 1em;
    }
}

Thanks soooooo much David. You guys are the best.

If I want to remove space above and below the featured image on desktop, how would I go about that?

Let me guess, this?

.post-image-below-header.post-image-aligned-center .inside-article .featured-image {
margin-top: 1em;
margin-bottom: 1em;
}

Thats correct !
Glad to be of help

Perfect. Actually one small thing. On some pages (will edit above and include the link) I'm using a shortcode to add the featured image after the first paragraph. How do I tweak the above and below space on that, please?

THANKS!

hmmm.... give this a shot:

.entry-content picture.wp-post-image img {
    margin-top: 5em;
    margin-bottom: 5em;
}

err...no doesn't work :-(

I edited the code above. I also increased the margins to 5em so their instantly noticeable ( if it works ).

The space above the image is actually from the Paragraph bottom margin, which is 1.5em. So unless your pictures top margin is greater than that it will not look any different.

Perfect, that works. Thanks again.

You're welcome