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
Size
Shrink to Fit: It lets the element shrink when space is tight. Under the hood, it allows normal flex‑shrink behavior (i.e., it does not force
flex-shrink: 0).Grow to Fill: It makes the element expand to fill available space. Under the hood, it sets
flex-grow: 1(and if not selected, it explicitly setsflex-grow: 0).Custom: Gives you manual control over
flex-growandflex-shrinkvalues. Whatever numbers you enter are output directly as inline styles (e.g.flex-grow: 2; flex-shrink: 0;).
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.
Alignment: Position the module to the start(left), center, end (right), or stretch. 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.
Column Class: lets a module pick a predefined flex‑column width class when it’s inside a flex layout. In other words, it controls how wide the module should be as a "column" in a flex row (e.g., 1/2, 1/3, etc.). It only applies if the parent layout is flex. If the parent isn’t flex, this option won’t do anything.
Aspect Ratio: Sets a proportional relationship between an element's width and its height. Define a ratio once, and Divi keeps that proportion as the element scales across phones, tablets, and desktops.
Note: The accepted units for all sizing options are px, %, em, rem, vw, vh, in, mm, cm, pt, and pc, and math functions such as calc, min, max. For more details, please check out the Unit Picker article.
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.