Hey, I’m Kayla from Wix Studio. Let’s take a look at some of the advanced sizing and measurement units in the Wix Studio Editor.
Most elements in the Studio Editor have some kind of default responsive behavior.
But if you want to take control of the behind the scenes measurements yourself, you can switch individual components and elements to advanced sizing by clicking the More actions icon here, and switching the toggle on. Or, with the element selected, you can just press OPTION and I.
When you turn on advanced sizing on a component, it’ll make the measurement units visible for that component on all breakpoints.
Just a heads up, you can only switch components back and forth one at a time. You can’t turn on advanced sizing for your entire site at once.
Now, you can go to any breakpoint and change these to a set of measurements that aren’t even covered by a default behavior option.
Then, if you go back to desktop and turn advanced sizing off, it’ll be turned off for that element on every breakpoint.
But turning it off won’t change your work. Instead, on mobile, where we customized the measurements, you’ll see Mixed again. Think of it as an Inspector panel setting that just shows the Editor in a different way.
So with this switched off, when you change a responsive behavior on a lower breakpoint…
…you’ll create an override, disconnecting that element's responsive behavior from its properties on higher breakpoints.
The same is true when you change its behavior in Advanced sizing mode.
If you’re happy with the element’s responsive behavior, you can just leave this “Mixed” as is. Your custom measurements will stay the same on mobile.
The only absolute unit of measurement is pixels – they’re exactly the same across all screen sizes.
Pixels are used as the behind-the-scenes measurement in the Fixed default responsive behavior.
But, if you use percentage, your elements will maintain their dimensions relative to their parent elements. So, an element at 70 percent width will always be 70 percent of the width of its parent across all screen sizes.
Then we have Viewport units, which are measured out of 100. Elements always take their values from the viewport, independent of their parent.
So with viewport width, or Vw, the viewport is the size of the area within the browser. An element will scale relative to the viewport’s width or height.
Viewport height, or Vh, works the same way, but takes the measurements from the viewport’s height.
Next we have, Calc which
allows us to set a measurement based on a calculation.
So, if for example, you wanted to have a header and section take up the entire viewport, you’d set the section height to calc with the calculation of 100vh minus the header height, which in this case is 100px.
And now, you can see that the header and the section together take up the entire height of the screen.
Min and max measurements tell an element how big or small it can get across screen sizes, before it should stop scaling.
If you set the min/max of this element to 100 pixels min and 400 pixels max, you can see that it stops scaling at those upper and lower boundaries.
Now let’s move on to auto.
If an element is set to auto, its height is determined by its children, by default.
Auto also means that as the container's content gets bigger or smaller, the container changes with it and its height will change according to any margins that we add.
We can set a minimum height for the container.
If the container has no content inside it to take its height from, it would collapse to zero, but the minimum height prevents that.
To make sure the box never gets too large or too small, we can just add minimum and maximum measurements.
This way, even if we remove this content from the container, it will never snap to zero height.
And last up, Max content just tells a parent element to match the widest or highest point of the content inside.
So basically when we change a container's width to max content, the text will be just one long line and the container will be as wide as the text.
Now you’re good to use advanced sizing and measurement units.
I’ll see you next time.
