How to make bootstrap containers work in gutenburg alignfull

Question

I've made a gutenburg .alignfull class

margin-left  : calc( -100vw / 2 + 100% / 2 );
margin-right : calc( -100vw / 2 + 100% / 2 );
max-width    : 100vw;

Which works nicely.

I've put a bootstrap container in...

<div class="alignfull green-bg">
    <div class="container">
        Hello
    </div>
</div> 

Which works fine in keeping the content in the grid. However it stops working when I view on smaller screens.

The padding and margin, which would usually bounce off the edge of the browser, go off the page.

So my content is right up against the wall, instead of padded like a good bootstrap container should be.

Does anyone know a fix for this?

---

I've tried different CSS

width: 100vw;
margin-left: calc( 50% - 50vw );
max-width: none;

And I am considering a media query to override the alignfull on smaller screens. I just felt there should be a css way to do it that still supported .container.

Thanks

Answer 1

Why don't you try change your alignfull css classes so that they only apply on larger screens like so:

@media all and (min-width: 768px) {
  margin-left  : calc( -100vw / 2 + 100% / 2 );
  margin-right : calc( -100vw / 2 + 100% / 2 );
  max-width    : 100vw;
}

Make sure to adjust the breakpoint (768px) to suit your project.