[Resolved] How to remove padding from featured image on mobile only in single posts

[Puneet]

Hi
Currently, this is how the single post featured image looks on a mobile device:-

https://snipboard.io/3fYNBG.jpg

How do I remove the padding from its sides so that it applies only on mobile and not on desktop? It’s not happening through the customizer. If I tick the padding off, then it goes off for all devices. Want to achieve something like this on mobile:-

https://snipboard.io/TBmzc9.jpg

Thanks and regards,
Puneet

[David]

Hi there,

try adding this CSS:

@media(max-width: 768px) {
    .single-post .featured-image {
        margin-left: -30px;
        margin-right: -30px;
    }
}

the negative margin values should equal the same px value as you have for your mobile container padding.

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

[Puneet]

Hi David,
Works perfectly, thanks.

Regards,
Puneet

[David]

Glad to hear that

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

[Author]

Posts