Managing Varients

I think I must be missing something fundamental with Webflow, as the behavior I am seeing seems rather tedious.

I have a section, it contains some text and an image. I have given it a class of “section”, and defined padding/layout etc. It looks good and I am happy.

I want my section to come in a range of colors, so I duplicate the initial section, then for each one apply a new class “red”, “blue”, or “green” and give them the appropriate background color.

This all looks good.

Now here is my problem…After looking at it on mobile, or maybe I just change my mind, I want my section’s padding (for example) to be different. If I go and change the initial one, I want to update them all automatically, but that doesn’t work. It just changes the one. I assume it’s because the others have the color classes applied.

If I was doing this manually, I would just change the “section” class…can I do that?

If not, what do people do when they have to make a change to a parent class!? It seems like I have to remove the color class, then make the change, then put the color class back on again!? Ok, that’s not too bad in a basic example, but if I have a lot of elements it would be impossible.

How do people handle changes made to varients?!

As suspected it was something obvious. If you click the “x selectors” text you can then change focus to the class you want to change and update it.

image