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.
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.
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
