Responsive design not working

Normally when I worked in the largest window size, I could create a class and the parameters would cascade downward to all the smaller sizes. Just now I created a class for an element that has padding and margin changes, but when I got to the smaller screen sizes, they are all still set to 0. What do I need to do make sure the class applies in all window sizes?


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

It sounds like you may have added some styles to your lower breakpoints that are overriding the cascading styles, however it’s a bit difficult to determine that without taking a closer look at the project. On the element in question, do the styles on the smaller screen sizes have their label shown in amber or blue?

Amber colored labels are styles that are inherited from other elements and/or breakpoints, while blue colored labels are styles that have been overridden on that particular breakpoint. If you click on any label, you’ll either see where the style has been inherited from or the ability to reset that style.

If you’re still having trouble, feel free to include your read-only link and I’ll take a closer peek :+1:

All my class names are blue. When I look at the hierarchy though, there are 2 classes listed that are identcal (columns 2) and (oliver2021). Don’t know why there are 2 there; it seems there should only be 1 of each. Anyway here’s my read only link. The problem is below the hero and just below “Grands and Great-grands”, the first picture in the row of 3 pictures.
https://preview.webflow.com/preview/craig-purchased-template-7953a9c52494b0?utm_medium=preview_link&utm_source=designer&utm_content=craig-purchased-template-7953a9c52494b0&preview=d72b8df6dc7727d88d1a6b629ce3093a&mode=preview

Hmm, I’m taking a peek at your project and not seeing some of the classes you mention and can’t seem to find any style overrides on the smaller breakpoints. Keep in mind that any changes you make to the project will be reflected on the read-only link (depending on when I load up the project on my end).

Are you able to provide screenshots of the issue and/or a bit more information on the problem area?

Well, it looks like my padding changes are trickling down now for some reason, but a new similar problem has arisen.
The background image I’m using in the largest window is not cascading down to the other sizes.
Here are the screenshots as you requested. I’m only working on the left most column cell at the moment.


Below is the next screen size down (and all the smaller ones look the same)

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

Wow! Thanks very much. I never would have suspected that they had changed the rules on editing at the largest breakpoint so everything would cascade down. I guess I missed their warning somewhere. Sure appreciate your help!