Streaming live at 10am (PST)

Duplicated section changes when I change main section

I duplicated a section and then Im trying to change background color etc of the section. But when I change background color the original duplicated section changes too.

How do I decouple two sections so that changes in one section dont affect the other?

Hi @ihaveadifferentname,

Welcome to Webflow and the Webflow Community.

When you duplicate (copy/paste) an element (in this case a section), the styling (class name) associated with that element is also copied across, therefore when you make a change to the class, all elements with that class will be affected.

To ‘de-couple’ the duplicated element, you will need to ensure it has a different class name. That can be achieved by giving it a completely new name (and therefore loos all styling from the previous class name), or you apply a ‘combo class’ and apply the separate styling.

Hope that helps,
Keiran

1 Like

Thank you @knk ! It worked :pray:

1 Like

Hi @knk ,
Jumping in here: Does it mean that when you copy a desktop section to make some modifications for mobile, and the origin section has 100 elements inside, I have to manually add 100 combo classes to be able to edit the mobile elements without modifying the origin desktop classes?
Isn’t there an automatic class duplication/renaming for that??
Thanks

Hi @Steph_P5 ,

In a short answer no. (You don’t have to manually ass combo classes).

I’m not sure of your exact scenario, but when styling classes on different viewports remember that CSS rules cascade down (assuming only styling for standard desktop viewport down. Webflow does allow cascading up for larger viewport screens, but that’s another topic and don’t want to confuse further)

If you copy an element or apply a class name to an element it will inherit the styling that belongs to that class.

Styling of the class can be changed per viewport (Tablet, Mobile Landscape/Portrait) to make the necessary layout/design changes.

  • I feel I might be confusing you more??

Let me know if that helps or not.
Keiran

Here is a webflow link that might help:

Hi @knk,
Thanks for your reply!
No confusion here, it’s just that I need more than regular cascading for this project on mobile:
I need to modify the elements content, text breakpoints, add and remove elements from their flex structure and containers.
I wanted to start from a copy from the desktop layout though, to gain some time.
So I think I do need to duplicate my classes, and was just wondering if it could be done automatically or if I had to do it manually :slightly_smiling_face: ?

Hey Stephane,

Hmmm…Ok, so in this use case, unfortunately, it looks like it’s a manual task, as you will be manipulating elements in the DOM for different viewports.

Sorry couldn’t be of more help :pensive:

It’s ok Keiran, big thank you for your replies anyway!