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