Sizing

Set the Width and Height for elements.

The sizing option provides options for setting fixed widths, percentage-based widths, viewport-based widths, and even fractional widths to ensure flexibility and precision in responsive design.

Width

The width setting offers a comprehensive range of options that make it easy to control the width of elements in your design.

Position Properties
Description

Auto

No position properties are set on the element, the parent element and browser handles the width of the element.

Full

The element will take up the full width of the parent element.

Screen

The element will take up the full width of the viewport, e.g. 100vw (full viewport width).

Breakpoint

The element width will be to set to the Breakpoint classes setup in the Theme Studio.

Theme Spacing

Choose from the pre-defined size classes set in the Theme Studio. You can also override the pre-defined classes and use Custom CSS Values.

Height

The height setting offers a comprehensive range of options that make it easy to control the height of elements in your design.

Position Properties
Description

Auto

No position properties are set on the element, the parent element and browser handles the height of the element.

Full

The element will take up the full height of the parent element.

Screen

The element will take up the full hight of the viewport, e.g. 100vh (full viewport height).

Theme Spacing

Choose from the pre-defined size classes set in the Theme Studio. You can also override the pre-defined classes and use Custom CSS Values.

Min & Max Settings

In Elements the min-width and max-width settings provide control over the minimum and maximum width of elements, allowing you to set constraints on how wide an element can grow or shrink. These settings are especially useful for responsive design, as they help maintain readability and layout consistency across different screen sizes.

Why Use Min-Width and Max-Width?

1. Content Readability: Setting maximum widths prevents text from stretching too wide, which enhances readability, especially on larger screens.

2. Responsive Design: Min and max-widths help maintain an adaptable layout by controlling how elements respond to different screen sizes.

3. Layout Constraints: Min-widths prevent elements from collapsing too small, while max-widths keep elements from overflowing their containers, ensuring a balanced and visually consistent design.

Use min-width and max-width settings when you need control over element sizes to ensure responsive, readable, and user-friendly layouts across various screen sizes.

Using Custom CSS Values

A lot of Components support a “custom sizing” option for you to specify the exact size of an element, this can be things like width, height, and placement.

When adding a value into the custom size box, it’s useful to remember that anything native css supports, Elements supports! So values like vh, px, rem, %, and css maths 2 should all work as expected.

Here's some examples:

  • 250px - Make the width (or hight) 250px wide.

  • calc(100vw-20px) - 100% viewport width - 20px.

  • 100vw - 100% of the viewport width.

  • 80vh - 80% of the viewport height.

Sizing UI in Elements

Last updated

We are Realmac Software. We make nice things.