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 Julia Sabiniarz on Unsplash

Copy to Clipboard

Featured image by: 

Let me know what you think about this post.

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

Share This Story!

Related articles

  • Read US Web Design System Version 2

    March 1, 2019

  • Read Using Formidable Forms to Add Issues to GitHub

    December 5, 2018