Streaming live at 10am (PST)

Copying Styles from one element to another?

Is there a way to copy styles from one div block / element to another?

Usually thats where you would use the same class/selector. Would that help?

I don’t think that would help in my situation because I am creating new classes for each responsive layout size, because my site has a lot of widgets and they need to be customized for different devices.

Example: “featured-listing” becomes “featured-listing-tablet” and so forth…

Some of the alignments needs to be adjusted, but I can’t use the same class because it would change the other screens

I would like to be able to copy classes, but not for the same reason. I would like to be able to copy a feature from one site to another, to be able to build a library of items that can be copied and pasted would be handy.

In your case Christopher, it seems to me that you should make use of cascading styles.
Start with the base style, and then add a second class to the items when working on each screen size, that way those classes should only apply to that screen size and you’ll b able to adjust positioning, size, scale, colour etc etc.

There’s a thread that was posted earlier describing this: Naming conventions when using webflow
That explains it in more detail - much better way of working.

1 Like

Thank you, I’ll look into it…

@christophertorr That’s what media queries do for you. So for example let me explain using a situation.

  • I create a button in Desktop (default) device. It has Red background, Rounded corners, display: inline-block, and top margin 20px. I see that it looks good in Desktop.
  • I go to Tablet device and I notice I want it to to have a different background and a different top margin. All I have to do is change those properties. The properties you added will affect only that device and below.
  • I go to phone and want it to be different. All I have to do is add the properties I want and it will override or create new ones.

So you don’t have to worry about creating classes for each style. When you click on a different device you are adding those styles (the blue properties in the style panel are the ones that you have for that class in that device and orange property is being copied from a device above it).

This video might help you understand cascading: http://tutorials.webflow.com/#page-nav-Styling

Does that help?

Yes, but will Webflow ever support custom media queries?

That question is a whole new topic!