Before we dive in, it’s good to know that there are different ways to define measurements.
Viewport is the currently visible area of a web page and the size varies depending on the user’s screen size.
You can set the width of elements in two ways:
Fixed: The element will remain the same width, even when a screen size increases or decreases. Use this setting when elements need to stay precisely the same width on all screens. The sizing is indicated in rem units
Relative: The element takes up the selected percentage (e.g. 83.33%, 100% or 100vw) and automatically adjusts when a screen size changes
By default, the width size is set to relative and auto, meaning the width automatically adapts and is responsive.
You can also set the minimum and maximum width.
Tip: We recommend keeping your text elements at a width of 45-75 characters per line. If your box is longer, you can set a maximum width.
You can set the height of elements in two ways:
Fixed: The element will remain the same height, even when a screen size increases or decreases. Use this setting when elements need to stay precisely the same height on all screens
Relative: Select from auto, full (100%) or screen (100vh)
Explained: Full (100%) versus Screen (100vh)
When you select Full 100%, the height takes up 100% of its parent element. If the parent element is 2000px, the child element will be too. If that’s too tall for mobile, only what fits on the mobile screen is shown.
With Screen (100vh), the element will only take up 100% of the height of the viewport. Meaning, on a mobile screen, the element is only as tall as what fits on the screen.
Like “prise de mousse” pouring out of a champagne glass when you’ve poured too enthusiastically, content might also overflow its container. This happens when there’s a set width and height, and not enough room inside the container.
By default, overflown content is visible (eye icon). If you want to hide all content that’s outside of its container, click the eye icon with the diagonal line across it. This clips (aka ignores) the content.
You can also click the arrows pointing up and down to add a scroll bar to the element. Choose Auto if you want to allow a scroll bar, but only automatically add it when needed.
Here you can choose which object-fit is best for the element. When you have an image, this setting allows you to select how the image should resize to fit the container.
There are five options:
Contain: Content is scaled to fit its container while keeping the aspect ratio, so your images won’t look weirdly stretched. Videos will have the letterbox effect
Cover: Content is scaled to fit the entire container, and everything that doesn’t fit is clipped
Fill: Content is scaled to fit the entire container and will be stretched when needed
None: Content is not scaled
Scale down: Content is scaled down, either using None or Contain (whichever option results in the smallest size)