Share on

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{
    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.

RELATED ARTICLES

  • Read Using Font Awesome Sharp Icons

    Using Font Awesome Sharp Icons

    Customization | Quick Tips

    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

    Customization | Elements

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

    April 1, 2023

  • Read Customizing Post Pagination

    Customizing Post Pagination

    Customization | Layout

    In this article, I show how CSS can be used to customize the Avada pagination element.

    February 20, 2023

  • Read Accordion Cards

    Accordion Cards

    Customization | Elements

    Another custom accordion example using pseudo element.

    February 17, 2023

  • Read Moving away from builder settings

    Moving away from builder settings

    Avada Challenge | Customization

    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

    Avada Challenge | Customization

    I just added a demo of an accordion-style image slider using nothing but Avada and some custom CSS.

    February 11, 2023