How to unlink div blocks

Hi,

I hope someone can help me out as I’m totally new to Webflow and kind of lost. I have created a div block called div block 5 and duplicated it multiple times and they are somehow very linked to another and I don’t know how to make them independent of each other. If I change text size in one it also changes it to the other same goes for the position. My site also has a some extra side space that I also don’t know how to remove. I’d really, really appreciate it if someone could just help me out!

Link to my read only site. The div blocks are on the applications page. https://preview.webflow.com/preview/filtra-6cf250?utm_medium=preview_link&utm_source=dashboard&utm_content=filtra-6cf250&preview=ecdac0a95dd2cd08682fbd6907d2e745&mode=preview


Here is my site Read-Only: https://preview.webflow.com/preview/filtra-6cf250?utm_medium=preview_link&utm_source=dashboard&utm_content=filtra-6cf250&preview=ecdac0a95dd2cd08682fbd6907d2e745&mode=preview
(how to share your site Read-Only link)

@designer1 - welcome to :webflow_heart:

So you’ve created a class:

image

Which has these properties:

When you create a new div with that class it’s going to apply the properties and if you change them, it’s going to change them for the class, not the individual div. So you can go a few routes, you can duplicate the class:

image

Which will create a new class which you can rename and then apply new styles to.

Or you can create a combo class:

image

Which will inherit the properties from your original class, but you can then make modifications to. So in this scenario, Small might imply this combo class has smaller text or is a smaller version of the main class.

Try to stick to naming conventions that make sense and describe what the class is doing. For instance I might rename Div Block 5 to feature-card or something like that.

2 Likes

When you “call it”, you’re giving it what’s called a CLASS NAME.

Every elements with the same class name will share styling properties.

To “unlink”, delete the class (click in the selector box then press backspace).

But then you lose all the styling…

So if you want to unlink but conserve the styling, you need to duplicate the class. Click on the class name (the little arrow), then Duplicate, then give it a new name: now you have your div with a unique class and you kept the look it already had.

You need to understand this very well, this is fundamental to HTML+CSS development.

3 Likes

I’m just going to leave this here, but as @vincent mentioned, this is fundamental to web development.

There are tons of tutorials out there (not related to Webflow) that would be beneficial as well, but given the structure of Webflow classes is a bit different than writing your own CSS (or using a pre-processor like SCSS/SASS) it’s worth taking a look at the University tutorial on the subject.

Sorry for the late reply but thank you so much!