[Support request] Adjust featured image padding in mobile

[Alvaro]

Hi,

I used this to remove padding from featured image in the blog page. But it doesn’t work well when I use a different padding for mobile.

Example: I’m using 40 for content spacing and 30for content spacing in mobile, in the customizer Layout module.

So, the images look fine in desktop but appear oversized (to the right) in mobile.

Also, what should I change so that the featured image also appears without padding in single post and page?

Thanks.

Álvaro

[Leo]

Hi there,

This will actually be an option in the customizer in the next version of GPP 🙂

Can you link me to the site? Thanks!

[Alvaro]

Hi Leo

Great.

https://staging.homesosimple.pt/blog/

Thanks.

Álvaro

[Leo]

Can you try wrapping the CSS in like suggested in this page:
https://docs.generatepress.com/article/responsive-display/#responsive-breakpoints

So you should have two blocks that are basically the same but wrap in different media query.

Let me know if this makes sense.

[Alvaro]

Wow, nice. Working fine now: https://staging.homesosimple.pt/blog/

What should I change to get a featured image without padding in single post and page?

Thanks.

Álvaro

[Leo]

Try this CSS:

.page-header-image-single {
    margin: -40px -40px 2em -40px;
}
.single.separate-containers .inside-article {
    padding-top: 0;
}

[Author]

Posts