In a recent project, we needed a left border on certain columns and then have them set to none on smaller screens. Since Avada currently does not have border settings for small and medium screens, this was our workaround (demo).

 @media only screen and (min-width: 1024px) {
    border-left:1px solid var(--gray-20); //#c9c9c9

Simply add this to your custom CSS and then add border–left to the class file on the columns that need the border.

Originally published on Aug. 16, 2022

time-lapsed of street lightsNew Feature - Quick Tips
brown turtle swimming underwaterList of Links

Leave a Reply

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


  • Read Using Font Awesome Sharp Icons

    Using Font Awesome Sharp Icons

    Here is a quick tip on using the latest icons from Font Awesome.

    April 1, 2023

  • Read 2 Code Snippets for Table of Contents

    2 Code Snippets for Table of Contents

    Two snippets to change behaviors and usability of the Avada table of contents element.

    April 1, 2023

  • 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