Lower breakpoint changes og grids, docking, etc. affecting higher breakpoints

I set up my breakpoints like this:
320-640 - Mobile
641-1024 - Tablet
1025-1920 - normal PC/Laptop

1920 - big screen.

Started designing at 1920
I use a grid.
I only used % and VH VW
I docked everything I could;
Items, images, Stacks, text within stacks.
I attempted to dock top and side or bottom and site.
I align item/images/stacks to top of grid.
I worked down the breakpoints, adjust all the elements above, as described above.
After finishing smallest breakpoint layout design,
I looked at larger breakpoints and they had all changed.


The most common reason is that you changed structure. For example, if you break up a stack or move objects out of a container, that type of change affects all breakpoints, including larger breakpoints.

I’d suggest that – until you’re comfortable with how changes at one breakpoint affect other breakpoints – you check all your breakpoints each time you make a significant change.

That’s also a good way to learn which changes affect all breakpoints. You’ll see it as soon as it happens, and you’ll therefore know what caused it. If you wait until too much later, you’ll have a mess with no idea of how it got that way.

By checking frequently, you’ll also be able to better describe a specific problem here in the forum and you’ll be more likely to get a useful answer. My answer here is pretty generic, because I don’t have a clear idea of your specific problem – ‘they had all changed’ doesn’t tell us much.


Thank you.