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.

RELATED ARTICLES

  • Read Hiding sticky header on scroll down

    Quick tip for hiding your stick header on scroll down.

    December 24, 2022

  • Read Using Avada Elements in the Block Editor

    Using Avada elements in the block editor to optimize tips and tricks.

    October 29, 2022

  • Read Remove dots under a required form label

    Ever been working on an Avada form, set the field to required, and then you start seeing spots? No, you're not seeing things.

    September 5, 2022

  • Read Remove RankMath Annoyance

    Remove RankMath Annoyance

    If you are a user of RankMath, I suspect you have encountered the annoying notification when you delete an item that is prompting you to set a redirect after you have deleted content. In and of itself, it is actually quite useful, but it doesn’t go away if you close […]

    September 3, 2022

  • Read List of Links

    List of Links

    I am working on a new project and recently discovered some great CSS features --- text-underline-position and text-decoration-thickness.

    August 21, 2022

  • Read Border between columns

    Border between columns

    Since Avada currently does not have border settings for small and medium screens, this was our workaround

    August 16, 2022