I am trying to edit the website in all forms(Phone,Tablet, Desktop), but if i move in one side, changes on the other one.
How can i change the size without affecting the other part?
Changes only flow one direction in Studio: down. Desktop trickles into tablet
and mobile, tablet trickles into mobile, and nothing ever travels back up.
Editing mobile cannot change your desktop.
So if editing mobile IS changing desktop, you’re not hitting the cascade —
you’re making a structural change, and those apply to every breakpoint at once
no matter which one you’re standing on. The ones that catch people:
Moving an element into a different container, cell or stack. Stacking elements
together. Deleting or replacing an element. Changing a link or swapping an
image source.
Resizing and repositioning an element inside its existing parent is different —
that’s a layout override and it belongs to the breakpoint you’re on. If you
want a different size on mobile, resize it on mobile and desktop stays put.
The fix for your workflow is to work top-down. Set desktop first and get it
right, then go to tablet and override what doesn’t fit, then mobile. Working
bottom-up means every desktop edit you make afterwards lands on top of the
mobile work you already did.
One thing that will confuse you later if nobody says it now: once you override
a property on a smaller breakpoint, that property stops inheriting from above.
Change the width on mobile, and from then on changing the desktop width won’t
reach mobile anymore — it’s detached. That’s usually what people mean when they
say a breakpoint “stopped responding” to their desktop changes. It didn’t. They
overrode it earlier and forgot.