Let’s first talk about how to set measurements for elements in Ycode.
Choose an element, open the Design settings on the right side and open Sizing.
Now manually input a value and choose the desired sizing unit. There’s a wide selection of units to choose from:
Pixels px
Percentage relative to the parent element %
Relative to the font size of the root element rem
Relative to the font size of the element em
Equal to the used x-height of the current font ex
Relative to the width of the “0” ch
Line height of the element lh
Viewport width vw
Viewport height vh
Viewport minimum vmin
Viewport maximum vmax
Viewport is the current visible area of a web page (not including scroll and toolbars). The size varies depending on the user’s screen size.
The measures vh and vw are equal to 1/100 of the height or width of the viewport.
The units vmax and vmin relate to the maximum and minimum values on vw and vh. The difference is that vmax and vmin can differ when a browser window is resized or the orientation of a mobile phone changes.
How to set width and height
You can set the width and height of elements in many different ways.
Manual: Input the value manually and choose the prefered sizing unit
None: Element won’t take up any space
Full: Element uses 100% of its parent element (if the parent is 2000 px, the child element is too)
Auto: Width and height automatically adapt and are responsive
Screen: Element uses 100% of the width or height of the viewport. On a mobile screen, the element is only as tall or wide as what fits on the screen
Content: Choose between Min-content or Max-content. Min-content defines an element’s minimal possible size where content doesn’t overflow. The max-content assumes there’s infinite available space
Columns: Choose a specific % of space that the element can take up from 8.3% (1/12 of the screen) up to 100% (12/12 of the screen)
You can also choose a minimum and maximum width and height for each element.
Overflow
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 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.
Object
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)
