Sizing

You can set the sizing properties of each element to control how they respond to changes in the viewport width.

Sizing options

Select an element on the canvas and open the Inspector panel to control how it resizes. Choose from Fixed, Fluid or Scale proportionally.

Fixed

Use Fixed sizing to keep the width of the element the same across all viewport sizes. Fixed elements are generally measured in pixels (px).

Fluid

Fluid sizing adjusts the width—and sometimes the height—of elements depending on the screen size. With fluid sizing, elements are measured in proportional units like percent (%), viewport height (vh) and viewport width (vw).

Scale proportionally

When elements are scaled proportionally, their height and width maintain a balanced ratio when resized.

Note: Scale proportionally is only available for media and decorative elements.

Image showing website in the workspace and the Inspector panel is open. Scale proportionally is clicked.

One more thing

You can set different sizing options for your elements at each breakpoint.

Follow these steps in the editor

Open exercise template →

Fixed sizing. Select the image. The Inspector panel will open on the right side, from Sizing options choose Fixed. Drag the handles at the sides of the canvas to see how the image remains the same size when the canvas is resized.
Fluid sizing. Now select Fluid from Sizing options and uncheck the Scale proportionally checkbox. Drag the handles at the sides of the canvas to see how the size of the image changes when the canvas is resized.
Scale proportionally. Check the Scale proportionally checkbox. Drag the handles at the sides of the canvas to see how the size of the image changes when the canvas is resized.