wordpress can alignwide image be fullscreen on mobile only?

Question

I'm using Wordpress Gutenberg image blocks with align wide. Ideally, I would like them to be edge-to-edge on mobile (like the alignfull style). I've tried playing with removing the padding and margins from everything I can find, but still get a small margin unless I remove all margins/padding from the site-content div (which puts the text against the viewport edges as well.

a sample page

This CSS won't work, but I'm not sure why:

.site-content > *:not( .alignwide ):not( .alignfull ) {padding-left:20px; padding-right:20px;}

Answer 1

I think this may be a better approach. In a media query targeting mobile, you want to target the class .entry-content .alignwide so that you override what is already in place.

Try this:

.entry-content .alignwide {
    left: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    max-width: 100vw;
    position: relative;
    right: 50%;
    width: 100vw;
}