Quick answer · Building a website · 2 min read
How do I set exact sizes and units in Wix Studio Two?
Select the element, open the Inspector, click More Actions at the top right and switch on Advanced settings. You can then use px, % or vh and set minimum and maximum sizes. By default Studio Two uses px*, a responsive pixel value.
Key points
- px* is a pixel value for the current breakpoint with a responsive unit underneath.
- Advanced settings unlock px, % and vh plus minimum and maximum sizes.
- Wix's sources disagree on whether advanced sizes are per breakpoint, so check in the editor.
By default, Wix Studio Two shows sizes in px*, a pixel value for the breakpoint you're on with a responsive unit underneath. For exact control, select the element, open the Inspector, click More Actions at the top right and switch on Advanced settings. You can then use px, % or vh and set minimum and maximum sizes.
How does px* work?
px* lets you think in pixels while the site stays responsive. The value is relative to the breakpoint you're editing, so the same element shows a smaller number on mobile. Hover over px* to see the real unit behind it, such as a percentage or an aspect ratio.
You can resize by dragging the side handles on the canvas, which shows the size as you go, or type a width and height in the Inspector's Design tab.
How do you choose the right setting?
- Start with a responsive behaviour under Design, Size, Responsive behavior: Scale proportionally, Relative width, Fixed, Stretch or Hug. That's enough for most elements.
- For sections, choose Auto height, Fixed height or Fit to screen. Fit to screen is 100vh, and you can lower it.
- Only switch on Advanced settings when you need a unit or a limit the behaviours can't give you, such as a maximum width on a card.
- Check every breakpoint afterwards. Advanced settings stay on for that element until you turn them off.
One thing to check: Wix's orientation page says advanced size settings give control at each breakpoint, while its Help Center says they apply to the element on all breakpoints. Test it in the editor before you rely on per-breakpoint values.
For the bigger picture on layouts across screens, read responsive design in Wix Studio Two, or see our Wix Studio 2 service.