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.   
A GIF showing how to use the drag handles to resize an element on the canvas

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. 
This means that when you change the width, the height automatically adjusts (and vice versa) to maintain the original shape of the element.
A GIF showing how resizing an element on the canvas looks when locking the aspect ratio

To lock the aspect ratio:

  1. Select the relevant media element.
  2. Click the Open Inspector arrow  at the top right.
The Open Inspector arrow you click in the Studio Editor to open the panel
  1. Click the Lock aspect ratio icon  under Size.
A screenshot of the lock aspect ratio icon you can click in the Inspector for any media element
  1. 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%).
A screenshot showing that hovering over px* in the Inspector opens a pop-up with the actual calculation
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. 
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:

  1. Select the relevant breakpoint in the editor.
  2. Select the element. 
  3. Click the Open Inspector arrow  at the top right.
The Open Inspector arrow you click in the Studio Editor to open the panel
  1. Select an option from the Responsive behavior drop-down.
A GIF of the Responsive Behavior drop-down when it's open, and the available options

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.
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:

  1. Select the relevant breakpoint in the editor.
  2. Select the element. 
  3. Click the Open Inspector arrow  at the top right.
The Open Inspector arrow you click in the Studio Editor to open the panel
  1. Click the More Actions icon  next to Size.
  2. Enable the Advanced Size toggle.
  3. 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.
GIF showing the measurement list that opens when you click one in the Inspector

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:

  1. Click the Wix Studio icon  at the top left.
  2. Hover over View.
  3. Hover over Sizing Preference.
  4. 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. 
A screenshot of the top menu in the Studio Editor, where you can control the sizing preference

Did this help?

|