Responsive design not working

Ah okay, I see the issue now—the reason the styles aren’t cascading down as you’d expect is because your using the three new larger breakpoints. Unlike the three smaller breakpoints, these cascade up from the “base” breakpoint (the middle layout icon at the top, shown with a star).

There is a good writeup here explaining how the functionality works since the addition of these new breakpoint sizes, but Webflow’s illustration below does a good job outlining the basic idea:

If you’re more accustomed to one of the traditional responsive development methods (whether it’s desktop first or mobile first) this may take some getting used to, but essentially you’ll always want to work out from the base breakpoint. A change made on the base breakpoint will reflect in both directions—smaller and larger—unless a change is made at a breakpoint in between. If you made the change to the tablet or lower breakpoint it’s reflected down and if you made the change to the 1280px or higher breakpoint it’s reflected up.

My suggestion is to make all of your changes to the base breakpoint while working on your overall design and only work on the smaller/larger breakpoints once you’re happy with the base layout. Personally I move down in size first to make sure the design works on smaller screens (only making adjustments to elements as needed) then add/edit larger breakpoints as needed if I feel like the design could be improved for larger displays.

Keep in mind that the larger breakpoints aren’t removable after they’re added, so changes made that you want to cascade properly may need to be copied to other breakpoints first. Hopefully that helps and feel free to let me know if you run into any issues or have additional questions :+1:

2 Likes