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.
Sizing UI in Elements
Last updated
