By Stephen Walker

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 August 16, 2022

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.

  • Remove dots under a required form label

    Ever been working on an Avada form, set the field to required, and then you start seeing spots? No, you're not seeing things.

  • Remove RankMath Annoyance

    If you are a user of RankMath, I suspect you have encountered the annoying notification when you delete an item that is prompting you to set a redirect after you have deleted content. In and of itself, it is actually quite useful, but it doesn’t go away if you close […]

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