▼
Streaming live at 10am (PST)

Responsive Styling, Cascade Down? Clear Styles?

#1

I'd consider myself a CSS/HTML expert. I'm really enjoying using Webflow for a more visual project.

1) How can I clear "reset" all responsive styles (and only responsive styles) for selected element?

2) I created some responsive styles on tablet mode to "test" the responsive properties. How could I make these changes cascade downward to the other smaller responsive sizes like mobile phone? I don't want the mobile phone responsive styles to start with the desktop styles, but rather to start from the tablet styles. It's a lot of work to recreate the responsive styles uniquely for each responsive size.

Thanks in advance

#2

1) What do you refer to as a "responsive style?"

2) The changes will automatically cascade down, as long as the changes that are made are made in the paintbrush tab.

#3

Thanks for the quick reply. By responsive style, I'm referring to media query.

Example:

Desktop: My section has margin of 20px
Tablet: Margin set to 40px
Phone: Margin starts at 20px and has to be manually set to 40px? (unsure)

1) How can I remove the responsive styles?
2) I'm confused when I switched to tablet mode and see properties with a red strikethrough line. What does this mean?
3) Why if I set the margin in phone to 100px, then I go back to desktop mode the margin is now 100px? I want it different for each responsive kind.

Here's a video highlighting a problem I'm experiencing. I made a common element called "sectional" I use it everywhere on the site. I want to add responsive properties to it, but it's the first element and any change I make to it while in responsive mode incorrectly changes every responsive mode.

Video of problem

Thanks!

#4

So the problem I noticed is that the reason from tablet the effects take place in desktop as well is because as you see in your steps below, when you click the higher classes the icon changes from a green tablet to a gray desktop, meaning it will now effect the desktop view and below.

Hope this helps you see where the problem is occurring. :wink:

closed #5

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.