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
Originally published on March 21, 2021
