The Sizing design options allow you to control the dimensions and alignment of any element of your layout. These settings include options for width, height, and alignment, giving you the flexibility to tailor the element to fit your design.
Where to Find the Sizing Options
Open the Module Settings: Click the gear icon or the module itself to access the settings.
Navigate to the Design Tab: Locate the Sizing option group.
Sizing Customization Settings
Width: Specify the module's width with units such as pixels (px), percentages (%), or viewport-based measurements like vw.
Max Width: Define the maximum allowable width for the module to ensure it doesn’t stretch too far.
Module Alignment: Position the module to the left, center, or right. This setting is accessible only when Width or Max Width is specified.
Min Height: Specify the minimum height for the module to ensure it maintains consistent vertical space.
Height: Set a specific height for the module, overriding its default dynamic sizing.
Max Height: Restrict the maximum height of the module to prevent it from becoming too tall.
Note: The accepted units for all sizing options are px, %, em, rem, vw, vh, in, mm, cm, pt, and pc.
Tips for Using Sizing Options
Ensure Responsiveness: Utilize percentage-based or viewport units (%, vw, vh) to keep devices responsive.
Balance Design: Keep module sizing consistent with adjacent elements for a cohesive layout.
Alignment Matters: Use module alignment to center or position the module visually, especially when setting custom widths.