How to set element size, position and spacing in Studio Two
Updated: 6 hours ago
In the Studio Two editor, you size an element by dragging it on the canvas or by editing the Size section in the Inspector. You then control placement with the vertical spacing, docking, margin and position type settings. Site-wide growth on large screens is capped with the max width setting.
Status: The Wix help articles describe the Studio Two editor as released in November 2026.
Before you start
Open your site in the Studio Two editor, not the classic Wix Studio editor.
Open the Inspector with the Open Inspector icon at the top right of the editor.
Switch to the Desktop breakpoint before you change vertical spacing, because it is disabled on smaller breakpoints.
Step by step
Resize on the canvas or in the Inspector. Select the element and drag a side handle. The exact pixel size shows while you drag. Or open the Inspector and type the width and height.
Read the px* value correctly. The Size section shows px*. The asterisk means the value is relative to the breakpoint you are editing, so it gets smaller on mobile. Hover over px* to see the real responsive unit behind it, such as a percentage or an aspect ratio.
Change the responsive behavior. Select the element, open the Inspector, go to the Design tab and use the Responsive behavior dropdown under Size. Common options are Scale proportionally, Relative width, Fixed, Stretch and Hug. Hover over an option to preview an animation of it.
Pick a section height behavior. For sections, choose Auto height, Fixed height or Fit to screen. Fit to screen fills the viewport height (100 vh), and you can lower the vh value if you want less.
Switch on advanced size settings when you need exact units. In the Inspector, click the More Actions icon and enable Advanced settings. You can then edit width, height, and min and max values, and change units such as px, % or vh by clicking the unit.
Set vertical spacing on the parent. On the Desktop breakpoint, select a section or container and find Vertical spacing under Layout in the Inspector. Automatic keeps the gaps between child elements across screen sizes. Manual leaves docking and margins to you.
Choose the docking. Select the element, open the Design tab and scroll to Position. Keep Element auto docks selected for automatic docking. To dock by hand, clear the checkbox and click Left, Right, Top or Bottom.
Add margins. Enter margin values for the sides where the element is docked. Top and bottom margins are disabled when the parent has automatic vertical spacing.
Set the position type. Select the element or section and click the All design options icon on the action bar. In the Inspector, choose Default, Sticky or Pinned from the Position type dropdown.
Configure sticky or pinned behavior. For Sticky, choose top, bottom or both, set the offset percentage, and decide whether to use Keep in front. For Pinned, choose whether the element is pinned to its section or to the whole page.
Set the site max width. Click the Customize Breakpoints icon at the top of the editor, enable Apply max width if needed, and enter a value in pixels. Sites start with 1920px. On wider screens, element sizes stay fixed and the site gets side margins.
Exclude sections or pages from max width. For one section, select it, open the Design tab and turn off Apply max width under Responsive behavior. For a whole page, select the page, open the Layout dropdown in the Design tab and click Exclude existing sections.
Good to know
Advanced settings apply to the selected element on all breakpoints. The mode stays enabled for that element until you turn it off.
Vertical spacing exists only for single-cell sections and containers. With a grid layout or manual CSS grid edits, the grid handles spacing.
If a section uses Fit to screen, vertical spacing is disabled and set to Manual.
Pinned position applies to all breakpoints. Sticky position cascades from desktop to smaller breakpoints, and you can change it there without affecting desktop.
Stretched elements cannot be pinned. Sections that do not border the page on all breakpoints cannot be pinned either. Sections can be pinned only at the top or bottom of the page.
Draw element places a new element on the canvas at the exact size and position you draw. Keyboard shortcuts let you skip the Add panel.
parnii note
Leave vertical spacing on Automatic unless a layout needs exact control, since it saves you from setting docking and margins on every breakpoint. Before turning off max width for the whole site, test on a copy: afterwards you cannot re-enable it for single sections only.
FAQ
What does px* mean in Studio Two?
px* is a pixel value that is relative to the current breakpoint. The real measurement is responsive, so it shrinks on mobile. Hover over px* in the Inspector to see the actual unit, such as a percentage or aspect ratio.
Why can't I see the vertical spacing setting?
You probably selected a single element, or a section or container with several cells or an advanced CSS grid. Single elements show Element auto docks instead, and grids handle positioning themselves.
How do I keep the header fixed while visitors scroll?
Select the header and use Scroll effect under Header settings in the Inspector, then choose Freeze. The header has its own scroll settings, separate from the Pinned position type.
Sources
Part of our Wix Studio Two series (Studio 2). Last checked: 06 November 2026.
