By Stephen Walker

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

share the article

Leave a Reply

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

RELATED ARTICLES

  • 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.

  • 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 […]

  • List of Links

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

  • Border between columns

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

  • Add Images to RSS

    By default, Avada does not include images in the RSS feed. This little bit of code in the function.php or your code snippet manager will take care of that.

  • Video Sizes

    Just a quick list of video sizes that can be used in the YouTube element to maintain the 16:9 aspect ratio.