Different class on element in different breakpoints

How To
1

I need to add a different class to an element depending on the width of the screen (breakpoints / media query):

image

and on mobile:

image

But after using this function, the assigned class is changed globally, not just for the indicated media query:

image

How to do it?

2

To be honest, my first thought is that this makes no sense. This is what media queries are for. If you want different CSS on an element at different breakpointsā€¦ do one of two things.

  1. Have one class you add to X element, and use media queries to trigger different stuff / adjust settings for that class.
    or
  2. Add 3 classes to the element so that Class-1 only acts on breakpoint 1, class-2 at breakpoint 2 and so on.
3

Re 1.

If you mean writing code like this:

@media (max-width: 1250px) {
  /* ā€¦ */
}

I donā€™t think itā€™s good for Bricks Builder, because itā€™s difficult to maintain in case of changes

Re 2.

How to do it? Because thatā€™s what I tried with the tools available in Bricks and it canā€™t be done

4

re2 - I might write
.class-1 { color:red; }
@media (some-rule) { .class-2 { background: green; } }
@media (other-rule) { .class-3 { background: green; } }

Then add 1,2 and 3 to the element - css will only kick in on X breakpoints.

re1 - Donā€™t understand your assertion that itā€™s hard to maintainā€¦ given itā€™s how weā€™ve been doing it for years, and itā€™s easier to maintain than some custom class-swapping script.
You can add a class, make innumerable css changes in the STYLES panel, different on all breakpoints, and thatā€™s it.

If what you want to do is unique to a very limited set of elementsā€¦ or canā€™t be done with the style panelā€¦ you can do this:

Add class ā€œ.my-classā€ to the element. Remain in desktop view. Add custom CSS to the custom CSS element.

Switch view, add the unique custom css to the element in that breakpoint. Repeat for all breakpoints.

The custom css is ā€˜rememberedā€™ for that class and breakpoint. Then if you change breakpoint px widths it wonā€™t matter.