Studio Editor: Setting the Size of Your Elements
8 min read
As you're designing a site, you want to make sure the elements look great on every screen size. In the Studio Editor, you edit the size in pixels and the responsive behavior takes care of the rest.
Every element comes with a default behavior (e.g. Scale proportionally), which controls the way it gets resized on other screens. From the Inspector panel, you can change an element's responsive behavior to one that better meets your needs.
Go to our Wix Studio Academy to check out additional Wix Studio webinars, tutorials, and courses.
In this article, learn how sizing works in the Studio Editor:
Tip:
You can set the element's size and responsive behavior per breakpoint.
Resizing an element
Select an element on the canvas and drag the side handles to make it smaller or bigger. This sets the way the element looks on the current breakpoint.
In the Inspector panel, you can check the element's exact width and height in pixels. If needed, you can enter your own width / height values.
Let the Inspector calculate for you:
For your convenience, you can use addition ( + ), subtraction ( - ), multiplication ( * ) and division ( / ) when typing size values. For example, make an element 3 times wider by adding *3 next to the current width.
Resizing media elements
When resizing a media element, like an image or a video, you can lock the aspect ratio so the width and height always stay proportional to each other.
Which media elements include this option?
This means that when you change the width, the height automatically adjusts (and vice versa) to maintain the original shape of the element.
To lock the aspect ratio:
- Select the relevant media element.
- Click the Open Inspector arrow
at the top right.
- Click the Lock aspect ratio icon
under Size.
- Resize the element by either:
- Entering the width / height value in the Inspector (the other value adjusts automatically).
- Dragging the handles around the element on the canvas.
Note:
This option is not available in the advanced sizing mode.
Setting the size in px*
px* is a unit of measure in the Studio Editor. It lets you edit sizing using a familiar measurement (pixels), while the actual measurement behind the scenes is responsive.
In other words, you design in pixels that represent the size on the canvas, and the element stays responsive. The specific values and size units depend on the responsive behavior you choose. Hover over px* to see the calculation, and the responsive size unit that is being used.
In the example below, the container's width on the current canvas is 1000 px*. The actual unit is percentage so the width is relative to every screen (79.1%).
What's the difference between px* and px?
Both let you edit in pixels, however:
- px* means the size you see is relevant to the breakpoint you're currently working on.
- px means the size is fixed across breakpoints.
Choosing an element's responsive behavior
When you add an element to the page, it already comes with a built-in responsive behavior. This means you don't have to worry about how the element looks on different screens - the responsive behavior ensures that it gets resized.
However, you may want to switch the responsive behavior, if you see one that is more suitable for your design.
What's the difference between the available behaviors?
Note:
The responsive behavior you select affects the size units in use. For example, selecting the Fixed responsive behavior changes the measurement from px* to px.
To choose a different responsive behavior:
- Select the relevant breakpoint in the editor.
- Select the element.
- Click the Open Inspector arrow at the top right.
- Select an option from the Responsive behavior drop-down.
Using advanced size measurements
Advanced sizing allows deeper customization of the element's size per breakpoint. When you enable advanced sizing for an element, you see the measurements we're using and adjust them to your needs.
This means you can work with responsive units instead of pixels, opening a whole new range of possibilities.
What are the available measurements?
Enabling advanced sizing applies to the specific element you select, on all breakpoints. The advanced sizing mode stays enabled for that element, for easy access, but you can disable it at any time.
To access and edit advanced sizing:
- Select the relevant breakpoint in the editor.
- Select the element.
- Click the Open Inspector arrow at the top right.
- Click the More Actions icon
next to Size. - Enable the Advanced Size toggle.
- Edit the sizing as needed: Width, height, and min and max values. Tip: Switch to a different unit (e.g. from px to %) by clicking it in the Inspector. This opens a list of the available measurements for the element.
Setting the sizing preference
Choose your sizing preference for the site you're designing. If you like working with advanced CSS measurements, you can enable advanced sizing across the Editor. Alternatively, if you prefer choosing the sizing mode per element, you can keep it that way.
To set the sizing preference for a site:
- Click the Wix Studio icon
at the top left. - Hover over View.
- Hover over Sizing Preference.
- Choose your preference:
- Always Show Advanced: The sizing in the Inspector is always set to advanced.
Note: This mode disables the option to switch specific elements back from advanced sizing. - Set per Element: You set the sizing preference for every element.
- Always Show Advanced: The sizing in the Inspector is always set to advanced.
