Who This Is For / When to Use
Use this feature if you need precise control over how elements display across desktop and mobile without using custom CSS.
This is especially useful for:
Fine-tuning layouts
Creating consistent spacing
Building responsive column designs
What the Height & Width Controls Do
All Page Builder elements support custom sizing through built-in height and width controls.
These controls allow you to:
Set fixed or flexible dimensions
Adjust sizing per device
Maintain consistent layouts without code
The controls are applied at the element container level.
Where to Find the Controls
The Height and Width settings are located in the Page Builder element settings.
Navigation path:
Select any element in the Page Builder
Open the Right Sidebar
Click the Styles tab
Scroll to Container Size
Supported Units and Values
You can set height and width using the following units:
px – Fixed pixel size
% – Relative to parent container
em – Relative to element font size
rem – Relative to root font size
vh – Viewport height
vw – Viewport width
auto – Automatically adjusts to content
Each value is selectable directly from the input field.
Responsive Device Support
Height and Width controls support device-specific styling.
You can:
Set one size for desktop
Override with different values for mobile
Maintain layout consistency across screen sizes
Changes apply only to the selected device breakpoint.
Layout and Column Behavior
These controls work seamlessly with horizontal layouts and column spacing options.
They fully support:
space-aroundspace-betweenOther flexible alignment and spacing settings
This ensures columns resize correctly without breaking alignment.
Benefits of Using Height & Width Controls
Using built-in sizing controls provides:
Precise layout control without custom CSS
Cleaner, more predictable responsive designs
Improved alignment and spacing consistency
Faster design adjustments directly in the builder
Common Issues and Fixes
Element appears too small or too large
Check the selected unit (px vs % vs vh/vw)
Verify the value is appropriate for the parent container
Mobile layout looks broken
Switch to the mobile breakpoint
Set a mobile-specific height or width value
Columns not spacing correctly
Confirm the element width is compatible with the column layout
Avoid fixed pixel widths when using flexible spacing options
FAQ
Can I use different height and width values for desktop and mobile?
Yes. Height and Width controls support device-specific overrides for responsive layouts.
Do I need custom CSS to control element size?
No. All sizing can be handled directly through the Styles tab using built-in controls.
Which elements support Height & Width controls?
All Page Builder elements support custom height and width adjustments.
What does “auto” do for height or width?
The auto value allows the element to size itself based on its content.