Changes only cascade down to smaller device sizes. In other words, changes on desktop will be reflected in tablet, mobile landscape, and mobile portrait. Changes in tablet will be reflected in mobile landscape and mobile portrait, but NOT desktop. Changes in mobile landscape will be reflected in mobile portrait, but NOT desktop or tablet. Changes in mobile portrait don’t cascade up at all.
It’s also important to keep in mind that changes will not cascade down to smaller device sizes if you’ve made a change to a style on one of the smaller device sizes. Example:
Let’s say you’ve created the full webpage in desktop, and you have a particular H1 element with a font size of 32. Assuming you haven’t changed any styles in tablet, mobile landscape, or mobile portrait, any changes to the font size of 32 in the desktop view will cascade down. If you’re in desktop and you change the font size to 28, all other views (tablet, mobile) will show a font size of 28, inherited from desktop.
BUT, if you go to tablet and change the font size on that H1 element to 18, the desktop font size will continue to be 28, while mobile views will show a font size of 18.
Thanks @McGuire. I think the problem I am having is I like to design first in mobile because it forces me to really pick out what are the most important parts and points I want to make, and then move up to tablet and desktop.
But everything keeps screwing up my mobile after I have made it and have it exactly how I want it.
How can I go about not screwing up my mobile design work?
Crazy idea, but you just create a div block in desktop mode and set the width to 100% and the max width to 320px and design your site in that? That way you’re doing the whole design using the width as mobile, so you can accomplish everything you want to regarding what you were saying about forcing you to pick out the most important points in your design. When you’re done, just make the wrapper’s max width 960px or 1200px or whatever you’d like for desktop, then go tweak your other modes.