Combo/Duplicated classes cascading up from mobile?

Hi everyone,

I am running into a bug(?) when using combo classes at the smallest screen size and was hoping to get some answers here.

The past few days I’ve been creating combo classes for smaller screen size layouts (specifically the 320pix W screen), and every time I reposition an element I create a combo class (or duplicate its class and rename it). Then when I go back to the normal breakpoint screen size (999px W), the class is applied to the element there. It seems like the classes are cascading up rather than just being applied to the small screen size. Any help with this? It messes up all of my formatting and I can’t get both the desktop screen and the mobile screens to be responsive at the same time.


Here is my site Read-Only: https://preview.webflow.com/preview/website-2-0-5cea4b?utm_medium=preview_link&utm_source=designer&utm_content=website-2-0-5cea4b&preview=0acadf3890a8f68290efafea1f590f92&mode=preview

Hey @Joseph_Semrai! Welcome to the forum :wave:

When you add a combo class to an element, it will add it to that element regardless of the breakpoint.

So there really is no need to add combo classes to the smaller breakpoints, but rather you would just need to add the appropriate styles you want for that breakpoint.

I hope that all makes sense.

Cheers!

1 Like

Hi Drew

Ahhh that makes so much more sense, works perfectly! For some reason I thought my combo classes worked previously when applying styles to lower breakpoints, but I may have been mistaken. So if I were to change the styling of an element at a lower breakpoint (say, mobile) with a combo class, that shouldn’t cascade “up” to my larger breakpoint? Thanks!

You are correct. The styles on breakpoints cascade down from desktop. So any changes made on mobile will not be applied on mobile.

If you have the larger breakpoints enabled, it works the other way. So those styles will cascade up to the larger breakpoints unless overridden.