Controlling the Height and Width of Page Builder Elements
Gain complete control over the dimensions of any element in the CRM's Page Builder using the Container Size settings. This guide explains how to set custom height and width values, select the appropriate measurement unit, and define different sizes for desktop and mobile views.
Understanding Container Size Controls
Container Size is a feature within the Page Builder that allows you to directly specify the height and width of an element. These settings determine the amount of space the element takes up inside its parent container, such as a section, row, or column. You can use various sizing units and apply different values for different devices to create responsive layouts.
Benefits of Using Container Size
- Pixel-Perfect Layouts: Achieve exact design specifications by setting precise dimensions.
- Responsive Design: Customize the size of elements specifically for desktop and mobile screens.
- Unit Flexibility: Choose from a range of sizing units to best suit your layout needs.
- Streamlined Design: Implement complex layouts directly through the user interface without needing custom code.
Available Sizing Units
The following units are available for defining element dimensions:
- px: A fixed measurement in pixels.
- %: A percentage of the parent container's size.
- em / rem: A unit relative to the current font size.
- vh / vw: A percentage of the viewport's height or width.
- auto: Lets the browser determine the optimal size.
How to Adjust an Element's Size
Follow these steps to modify the dimensions of any element.
Step 1: Access the Page Builder
Navigate to Sites > Funnels or Websites from your CRM dashboard. Select the specific site or funnel, then open the editor for the page you wish to edit.
Step 2: Select an Element
Click on the element (e.g., a text box, button, image, or form) that you want to resize.
Step 3: Locate the Container Size Settings
In the right-hand sidebar, click on the Styles tab. Scroll down to find the Container Size section.
Step 4: Define the Dimensions
For both the Height and Width fields, first select a unit from the dropdown menu (like px or %). Then, enter your desired numerical value.
Step 5: Adjust for Mobile
Use the device toggle icon next to the Container Size section to switch to the mobile view. You can then enter different height and width values that will only apply to mobile devices.
Frequently Asked Questions
Q: Can I use decimal values, such as 33.33%, to create equal columns?
A: Yes, decimal values are supported for precise control. It's a good practice to check the mobile view to ensure columns behave as expected.
Q: How do I undo my size changes?
A: To revert an element to its default size, set the unit for the height or width back to auto.
Q: Do the mobile size settings affect the desktop view?
A: No. Values you set in the mobile view are independent and do not change the dimensions you set for the desktop view.
Q: Can I use Container Size with Margin and Padding?
A: Absolutely. Container Size works alongside Margin and Padding settings, giving you comprehensive control over an element's layout and spacing.
Q: Are negative numbers or zero allowed for height or width?
A: No. Entering a value of zero or a negative number will not change the element's size; it will remain at its current dimension.