I’m working on wix studio site and I’m having trouble keeping the layout consistent between desktop, tablet and mobile. It looks fins at the main breakpoints, but when I check intermediate screen sizes, some spacing and text sizes changes quit a bit. what best way to structure sections and containers in wix studio? so that design stays consistent across diff screen widths?
Studio does not interpolate between your defined breakpoints. Elements scale according to their responsive behavior setting, and spacing follows the margin/padding units you set. The inconsistency you are seeing at intermediate sizes is those settings doing what they are configured to do.
Spacing changes come from margin and padding unit choices. The default px* (scalable pixels) adjusts proportionally as screen width changes. Fixed px values stay constant. Mixing the two across related elements produces gaps that shift as the viewport narrows.
Text size changes happen when an element’s responsive behavior is set to Scale Proportionally — it shrinks with the viewport. If neighboring text is set to Fixed or Wrap, one resizes and one does not, so the relationship breaks at intermediate widths.
The fix: check every section and container’s margin/padding units in the Inspector panel. Use px* consistently across elements that need to hold a relationship. Set text responsive behavior uniformly — either all Scale Proportionally or all Wrap — within a section. Avoid Fixed on a mobile-first layout unless you want the element to stay large on small screens.
Work desktop-first. Changes cascade down from larger breakpoints to smaller ones, so setting proportional relationships at desktop gives you a base the smaller breakpoints inherit.
Verified against: