Sizing
Set the Width and Height for elements.
Last updated
Set the Width and Height for elements.
Last updated
We are Realmac Software. We make nice things.
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.
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. |
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. |
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.
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.
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.
