I recently read an article on CSS Tricks about achieving a modern layout using CSS grid that allows your text to be a fixed width for optimal reading and allowing select images to to span the full width of your page or container. This does not work tremendously well with Avada (especially full bleed), but it is easy to emulate using custom styles and elements. I decided to use the CSS grid method on this site and it is about the 80% solution – 100% for just text. Simply apply the article class to your text element and responsive layout is automatically managed. Hopefully, CSS grid support will be making its way to Avada in the very near future. Here is the code I use  – I am including all the styles I use in the article in case there are questions.

Photo by David Klein on Unsplash

Copy to Clipboard

Originally published on March 21, 2021

Avada Challenge - CV Page
Sunrise in MarylandReplacing Avada

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