By Stephen Walker

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

share the article

Leave a Reply

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

RELATED ARTICLES

  • Customizing the Off Canvas Background

    Styling the off-canvas element is "easy" if you know which part to target.

  • Customizing Toggle (Accordion) Headings

    In a recent project and for this site's new menu, I needed to change the default of the toggle heading and place the icon on the right side but not pushed the full width of the toggle panel. Fortunately, this is easy to do with a couple of lines of CSS.

  • Buttons, buttons, and more buttons

    One of the best things about Avada is the flexibility to create custom variations of elements and save them to the library for later use.

  • 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

  • Test Layout – The Becker

    Trying to duplicate the basic look and feel of Dirk Beckers' website using Avada.