Width & height values determine the size of elements.

Set height & width by selecting the element and using the top bar.

There are different width & height units available on STUDIO. 

Pixel (PX)

Pixel size is a fixed unit of measure. When width is set to pixel, no matter the size of the page or the screen, that element size won’t change.

Percentage size(%)

Percentage size (%) is the size of an element in relation to its parent box, or the page itself .

When using percentage size, the proportion between and element and the page or the container box stays the same as the page shrinks.

 

Auto

When setting width or height to auto, an element’s size will automatically adapt to its content.

You can set width & height to auto either by double clicking on an elements’ border or by selecting it and choosing ‘auto’ from the top bar.

 It is recommended to set a container box height to auto, and use padding to create space.

 NB: Setting a container box unit size to auto and its children boxes to % doesn’t work.

 You will want either % or pixel size for the parent box, when a child box size is relative.

Flex

Flex stretches an element width in order to fill the remaining space in a box.

To set an element width to flex, make sure the elements direction is horizontal first, then select the element and choose ‘flex’ from the width drop down on the top bar.

The flex value represents a fractional unit of a box width.

If for example, there are 4 elements all with a flex value of 1, they take each an equal part of the box width.

Flex can be used to create complex layouts very quickly, for example galleries with pictures of different width.

Changing flex values

To create a gallery with pictures of different width, you can change the flex values, increasing that of pictures which you want to take up more space.

In the example above, the elements flex values are set as below.

Did this answer your question?