In earlier posts, I have mentioned that I am transitioning post creation to the Gutenberg editor. If you haven’t tried the editor, please do, it is such a time saver and after five minutes, going back to the legacy editor will be painful – at least mentally.

One of the issues of this transition is how to get the Avada layout to allow the advantages of Gutenberg blocks to lay nicely with the textual content. I have tried a variety of fixes, but I think I finally have the correct combination.

Modern CSS to the rescue

The ability to use modern CSS is such a benefit these days. The often-maligned Internet Explorer is finally gone — or at least no longer supported. By using “:is()” in CSS we can now target specific portions of our content.

The solution (right now)

The latest solution uses the layout builder and applying the .article class to the column with the content element. Here is the CSS:

.article :is(h1,h2,h3,h4,h5,p,li){
  
  max-width:45rem;
  margin:1rem auto
}

.article p a , .article li a{
    text-decoration:underline!important;
  
}

.article p  a:hover, .article li a:hover{
    text-decoration:none!important;
    cursor:pointer;
  	outline: 3px solid transparent;
    color: #0F2131;
    background-color:rgba(252, 199, 94,.6);
    box-shadow: 0 -2px rgba(252, 199, 94,.6), 0 3px #0F2131;
}

This restrains the textual content to the industry’s ideal reading width (based on font size) but allows all the other elements and blocks to use the built-in layouts. Some research into floated images still needs to be done as these do not layout correctly.

Originally published on Dec. 18, 2021

man in black shirt sitting in front of computerAvada 7.6 is a game-changer
black and white quote boardGlobal Typography

Leave a Reply

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

RELATED ARTICLES

  • Read Customizing Post Pagination

    Customizing Post Pagination

    In this article, I show how CSS can be used to customize the Avada pagination element.

    February 20, 2023

  • Read Accordion Cards

    Accordion Cards

    Another custom accordion example using pseudo element.

    February 17, 2023

  • Read Moving away from builder settings

    Moving away from builder settings

    I am beginning to restructure my site to rely less and less on the Avada element settings in favor of site-wide styling.

    February 12, 2023

  • Read Horizontal Image Accordion

    Horizontal Image Accordion

    I just added a demo of an accordion-style image slider using nothing but Avada and some custom CSS.

    February 11, 2023

  • Read Styling the RankMath Sitemap

    Styling the RankMath Sitemap

    If you are a RankMath user, you may know that they recently introduced a feature that automatically generates an HTML version of the XML sitemap. This post is to share the CSS I am using to add some layout to an otherwise long list of links.

    December 11, 2022

  • Read Quick Tip: Faux Nested Columns

    Quick Tip: Faux Nested Columns

    Overcoming a shortcoming in Avada with some CSS.

    December 4, 2022