# Height & Width Controls for Page Builder Elements > Use Container Size in GHL Customer Care’s Page Builder to set width and height for any element, choose units, set desktop/mobile values without the need for CSS. - Source: https://docs.ghlcustomercare.com/docs/sites/funnels-and-websites/height-width-controls-for-page-builder-elements - Section: Sites / Funnels and Websites - Reading time: 3 min - Images: 5, each explained below --- Take precise control of every element’s size in GHL Customer Care’s Page Builder using Container Size. This article will show you how to set custom height and width, pick the right unit, and assign different values for desktop and mobile. --- **TABLE OF CONTENTS** - [What is Container Size (Height & Width) Control?](#what-is-container-size-height-and-width-control) - [Key Benefits of Container Size Control](#key-benefits-of-container-size-control) - [Supported Sizing Units](#supported-sizing-units) - [How To Edit Container Size](#how-to-edit-container-size) - [Frequently Asked Questions](#frequently-asked-questions) - [Related Articles](#related-articles) --- # **What is Container Size (Height & Width) Control?** Container Size is a built-in control in the page builder that lets you define an element’s height and width directly in the builder. These values determine how much space an element occupies within its parent container (e.g., column, row, or section). You can choose units that best fit your layout goals and set device-specific values for responsive designs. --- ## **Key Benefits of Container Size Control** - **Precise Layouts**: Fine-tune element size for exact designs. - **Responsive Control**: Set different values for desktop and mobile. - **Unit Flexibility**: Choose the between multiple sizing units to pick the correct one for the specific scenario. - **Cleaner Builds**: Achieve exact results in the UI instead of custom CSS. --- ## **Supported Sizing Units** Different units change how size is calculated. The following familiar web-design units are options so you can select the unit that works best for your project! - **px** – fixed pixel count (exact sizing) - **%** – percentage of the parent container - **em / rem** – scale relative to font size - **vh / vw** – viewport-based height or width - **auto** – browser decides optimal size --- ## **How To Edit Container Size** Follow these steps to give elements precise dimensions in just a few clicks: #### **Step 1:** Open the Page Builder - Open the Page Builder for your funnel or website page by navigating to **Sites > Funnels** or **Websites.** - Select the Site/Funnel then open the Editor for the page you would like to edit. ![Step 1: Open the Page Builder (image 1 of 5)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155057335850/original/s2zGduUbQCNBT1ieacpEY0RkuyiRDV5DVw.png) **Step 1: Open the Page Builder (image 1 of 5)** This screenshot appears in the "Step 1: Open the Page Builder" section of "Height & Width Controls for Page Builder Elements". The text alongside this image reads: Open the Page Builder for your funnel or website page by navigating to Sites > Funnels or Websites. Select the Site/Funnel then open the Editor for the page you would like to edit. The navigation path used here is Sites > Funnels. Immediately after, the guide continues: Select the element you want to resize (text, button, image, form, etc.). - Path: Sites > Funnels - Where to go: Open the Page Builder for your funnel or website page by navigating to Sites > Funnels or Websites. Select the Site/Funnel then open the Editor for the page you would like to edit. - Controls: Sites > Funnels, Websites. - Next: Select the element you want to resize (text, button, image, form, etc.) Full procedure: 1. Open the Page Builder for your funnel or website page by navigating to Sites > Funnels or Websites. 2. Select the Site/Funnel then open the Editor for the page you would like to edit. #### **Step 2:** Select Element Select the element you want to resize (text, button, image, form, etc.) ![Step 2: Select Element (image 2 of 5)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155057339590/original/UIlFnT_qkicPSf8gMhxf5mQAksMf4ICKIQ.png) **Step 2: Select Element (image 2 of 5)** This screenshot appears in the "Step 2: Select Element" section of "Height & Width Controls for Page Builder Elements". The text alongside this image reads: Select the element you want to resize (text, button, image, form, etc.). Immediately after, the guide continues: In the Right Sidebar, choose the Styles tab. Then scroll to the Container Size section. - What to choose: Select the element you want to resize (text, button, image, form, etc.) - Next: In the Right Sidebar, choose the Styles tab. Then scroll to the Container Size section. #### **Step 3:** Go to Container Size In the Right Sidebar, choose the **Styles** tab. Then scroll to the **Container Size** section. ![Step 3: Go to Container Size (image 3 of 5)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155057339682/original/RpLabIm69u0sbbGlaE2p_HlSXBbOQ2hwAw.png) **Step 3: Go to Container Size (image 3 of 5)** This screenshot appears in the "Step 3: Go to Container Size" section of "Height & Width Controls for Page Builder Elements". The text alongside this image reads: In the Right Sidebar, choose the Styles tab. Then scroll to the Container Size section. Immediately after, the guide continues: Select a sizing unit (px, %, etc.) from the dropdown next to Height and Width. Then enter your desired size for Height and Width. - Where to go: In the Right Sidebar, choose the Styles tab. Then scroll to the Container Size section. - Controls: Styles, Container Size - Next: Select a sizing unit (px, %, etc.) from the dropdown next to Height and Width. Then enter your desired size for Height and Width. #### **Step 4:** Set Sizing Select a sizing unit (px, %, etc.) from the dropdown next to Height and Width. Then enter your desired size for Height and Width. ![Step 4: Set Sizing (image 4 of 5)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155057339881/original/VW84p-AZEUeFZ3ItJmPAe4aJxaRioFAKJQ.png) **Step 4: Set Sizing (image 4 of 5)** This screenshot appears in the "Step 4: Set Sizing" section of "Height & Width Controls for Page Builder Elements". The text alongside this image reads: Select a sizing unit (px, %, etc.) from the dropdown next to Height and Width. Then enter your desired size for Height and Width. Immediately after, the guide continues: Use the device toggle at next to Container Size to switch to Mobile View and enter a mobile-specific value if needed. - What to fill in: Select a sizing unit (px, %, etc.) from the dropdown next to Height and Width. Then enter your desired size for Height and Width. - Next: Use the device toggle at next to Container Size to switch to Mobile View and enter a mobile-specific value if needed. #### **Step 5:** Optimize for Mobile Use the device toggle at next to **Container Size** to switch to **Mobile View** and enter a mobile-specific value if needed. ![Step 5: Optimize for Mobile (image 5 of 5)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/155057339942/original/davWxUk5djwSSjl1npdp0AwKyE7ZZorBwg.png) **Step 5: Optimize for Mobile (image 5 of 5)** This screenshot appears in the "Step 5: Optimize for Mobile" section of "Height & Width Controls for Page Builder Elements". The text alongside this image reads: Use the device toggle at next to Container Size to switch to Mobile View and enter a mobile-specific value if needed. Immediately after, the guide continues: Q: Can I use decimals like 33.33% for equal columns? Yes! Decimals are supported for fine control (e.g., 33.33% × 3 cards). Validate on mobile to avoid unintended wrapping. - What to fill in: Use the device toggle at next to Container Size to switch to Mobile View and enter a mobile-specific value if needed. - Controls: Container Size, Mobile View - Next: Q: Can I use decimals like 33.33% for equal columns? Yes! Decimals are supported for fine control (e.g., 33.33% × 3 cards). Validate on mobile to avoid unintended wrapping. --- ## **Frequently Asked Questions** **Q: Can I use decimals like 33.33% for equal columns?** Yes! Decimals are supported for fine control (e.g., 33.33% × 3 cards). Validate on mobile to avoid unintended wrapping. **Q: How do I revert changes?** Set the unit to **auto** to revet the sizing to the element’s natural state. **Q: Will mobile values affect desktop?** No. Values set in **mobile view** apply only to mobile, leaving desktop settings intact. **Q: Can I still use the Margin and Padding settings?** Absolutely! Height & Width control adds another layer, use all three together for complete layout control. **Q: Are negative or zero values allowed for width/height?** Negative values (or 0) are not supported. If a number that is 0 or lower is entered, the element will remain at the current size. --- ## **Related Articles** - [](https://docs.ghlcustomercare.com/docs/sites/funnels-and-websites/advanced-image-settings-for-mobile-desktop-view)[Advanced Image Settings for Mobile & Desktop View](https://docs.ghlcustomercare.com/docs/sites/funnels-and-websites/advanced-image-settings-for-mobile-desktop-view) - [Using the Right Sidebar in Funnel & Website Builder](https://docs.ghlcustomercare.com/docs/sites/funnels-and-websites/using-the-new-revamped-sidebar-in-funnel-website-builders) - [Creating Mobile-Responsive Designs Made Easy (Funnel & Website Builder)](https://docs.ghlcustomercare.com/docs/sites/funnels-and-websites/creating-mobile-responsive-designs-made-easy-funnel-website-builder) - [Nested Layouts in Funnel and Website Builder](https://docs.ghlcustomercare.com/docs/sites/funnels-and-websites/nested-layouts-in-funnel-and-website-builder) - [Drag & Drop with Auto-Hierarchical Layout](https://docs.ghlcustomercare.com/docs/sites/funnels-and-websites/drag-and-drop-with-auto-hierarchical-layout-in-funnel-website-builder) --- Documentation for GHL Customer Care. Support: support@ghlcustomercare.com