[Resolved] Container on mobile

[nickgray]

I need to reset container padding on mobile, but only on blog posts in order to have full width images inside those posts on mobile. When I reset the spacing in Customizer it resets spacing everywhere – on all pages – and everything gets messed up. Also, when I add padding left and right to all headings, paragraphs, ul, caption texts it is not applied. Is there simple way to make just images inside posts full width, without affecting pages?

[David]

Hi there,

on the Single Post you want ALL images to span the full width of the Screen?
If so can you share a link to your site and ill look at what CSS is required to do that.

[nickgray]

Yes, all images inside posts should be full width on mobile phones, without any space on sides.

[nickgray]

there are 300 posts, so CSS is necessary in order to have that layout on each of them.

[David]

Try this CSS:

@media(max-width: 768px) {
    .entry-content img,
    .wp-caption img[class*=wp-image-] {
        margin-left: -20px;
        margin-right: -20px;
        max-width: 100vw;
    }
}

[nickgray]

It works, thank you!

[David]

Glad to hear that

[Author]

Posts