LESSON 02

Sizing.

You can set the sizing properties of each element to control how it responds 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.

Note: Scale proportionally is only available for media components.

Fixed.

Use fixed sizing to keep the width of the element the same across all viewport sizes.

Fluid.

Fluid sizing adjusts the width - and sometimes the height - of elements depending on the screen size.

Scale proportionally.

When elements are scaled proportionally, their height and width maintain a ratio when resized. This is available for media and decorative elements.

One more thing.

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

TRY IT YOURSELF

Exercise on sizing.

​Open Academy X from desktop to complete this exercise.

01

Fixed sizing. Select the image. The Inspector panel will open on the right side, from the 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.

02

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.

03

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.

Watch related videos.