Streaming live at 10am (PST)

Larger or smaller Breakpoints cascading Up And Down?!?!

Hi there!

I just started using Webflow about a week ago and have never really done the actual “developing” of a website (I just design prototypes for developers).

Well now I’m starting to learn Webflow and I am having an issue with the breakpoints.

More specific:
I am working on an animation where images fly in from the right and rest in a three-dimensionally rotated state. Obviously, because the larger breakpoints are larger I have to adjust the point the images move to. To do that I duplicated the animation three times (one for each breakpoint) and renamed them (the animation is called “Model Images”).
Now, in the larger breakpoints, I wanted to add a style to the Div Block which contains the Images, to assign each breakpoint with its animation but this doesn’t work.
Every time I try to add or change the styles of the Div Block in the larger breakpoints, it cascades up and down and the changes are applied in all breakpoints.
The same thing happens when I change something in the smaller breakpoints.

Is this normal?!

Am I just not doing it right?!

I hope anybody can help me. Please remember that I only know the basics of Webflow.
Thanks in advance!

Noah.


Here is my site Read-Only: https://preview.webflow.com/preview/noahs-sublime-project-8a5dc6?utm_medium=preview_link&utm_source=designer&utm_content=noahs-sublime-project-8a5dc6&preview=25e493ab1999ee7ef54854e49906203c&mode=preview

Here are a couple of resources for you regarding Breakpoints and their usage.

Micro lesson - https://www.youtube.com/watch?v=DV36RpAeNtA
University lesson - https://www.youtube.com/watch?v=OBtYWEG1yK4

From desktop down to mobile, styles will always cascade down. (CSS = Cascading style sheets)
Larger breakpoints will cascade UP to larger breakpoints.

Hope this helps.

Thanks for the reply.

Yes, those resources I have already watched and they didn’t really help me solve my problem.

I know that from desktop down to mobile the styles will cascade down and from larger breakpoints they will cascade up.

But somehow in my project the mobile breakpoints ALSO cascade upwards and the larger breakpoints ALSO cascade down to ALL breakpoints!

Could you let me know what elements (and on what pages) specifically you’re seeing, where the style is cascading up unexpectedly and I will take a look.

If a style is set on tablet, then it will apply to breakpoints below it. If you’re seeing the style applied on desktop breakpoint then it’s likely that it’s been explicitly set and can be removed. Without knowing which elements have the issue though it’s hard to tell so I’m only assuming here :slight_smile:

Hello, sorry for the late answer!

I have more or less solved it on my own. It was caused by a mistake of mine which I have now sorted out.

Thanks anyway! And have a nice day! :smile:

Noah.

1 Like