A few releases ago the Avada development team was forward thinking and trying to be Gutenberg-friendly, but unfortunately, this was done before the layout builder was available and some of the design decisions are no longer correct. One of these has to do with Gutenberg’s wide-width getting which is hardcoded as 80vw in the Avada CSS. This has caused me a couple of headaches, and I decided to find a fix. So far this code meets my need. I place it at the top of the custom CSS. Basically, all it does is remove any of the settings.

.fusion-body:not(.has-sidebar) .alignwide {
   position: unset;
   left:unset;
   transform: unset;
    max-width: unset;
   min-width: unset;
  width: unset;
}

I also place most Gutenberg specialty blocks (code blocks, media+text, video, etc.) in a group (aka container) and in my CSS I have this for my content class:

.content .wp-block-group.alignwide {
    max-width: 60rem!important;
    margin-inline: auto;
}

If this helps you or you have some other workarounds, please share in the comments.

Originally published on July 23, 2022

Avada 7.8 is liveWhere to find all the new features in 7.8
An in-house setup for editing videos on a computerVideo Sizes

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.