GoHighLevel Page Builder Size Controls

/ CRM, GHL / By

GoHighLevel Page Builder Height & Width Controls

The GoHighLevel page builder gives you more precision than tools like ClickUp forms or docs when it comes to sizing elements on your funnels and websites. By understanding how height and width controls work, you can create clean, responsive designs that look great on any device while keeping full control over spacing and layout.

This guide explains how to use element, column, and section height and width settings in GoHighLevel, how each option behaves, and when to use them for the best visual results.

Understanding GoHighLevel Height & Width Basics

In the GoHighLevel page builder, each structural layer has its own size controls:

  • Sections – highest level containers
  • Columns – subdivisions within a section
  • Elements – content items like text, images, buttons, and forms

Height and width settings are available in the settings panel when you select any of these layers. The meaning of each option is slightly different depending on whether you are editing an element, column, or section, but the basic concepts are consistent.

GoHighLevel Height Options for Elements

When you select an individual element in GoHighLevel, you will see a Height dropdown in the settings panel. This controls how much vertical space the element occupies.

Element Height Choices in GoHighLevel

For most elements, the main height options are:

  • Auto – The element automatically adjusts its height based on its content. This is the default and is usually best for text and buttons.
  • Full Height – The element stretches to fill the full height of its parent container (usually the column). The exact appearance depends on the size of the parent.

Some specific element types may offer an additional explicit height field where you can type a custom value (such as pixels), but the primary controls are Auto and Full Height.

When to Use Auto Height in GoHighLevel

Use Auto height when:

  • You want the element to shrink or grow based solely on its content.
  • You are designing responsive layouts and want minimal manual constraints.
  • You are stacking multiple elements vertically in the same column.

This setting helps prevent unexpected empty space and usually provides the most flexibility.

When to Use Full Height in GoHighLevel

Use Full Height when:

  • You want an element (like a background image or a hero container) to fill the entire vertical space of its column.
  • You are aligning items across columns and need consistent vertical size.
  • You want a single element to dominate a section visually.

Remember that Full Height depends on the parent container. If the column or section is small, the element can only expand as far as the parent allows.

GoHighLevel Width Settings for Elements

Width controls how much horizontal space an element can occupy within its column. In GoHighLevel, you usually manage element width through:

  • The Width dropdown or slider in the element settings panel.
  • Alignment options like left, center, and right.
  • Optional max-width fields (for elements such as images or videos).

Common Width Behaviors in GoHighLevel

Typical width behaviors include:

  • Full width within the column.
  • Content-based width, where the element is only as wide as necessary.
  • Custom width, when an input field allows you to specify an exact size.

Because width often interacts closely with column size, you should always check how the element looks in tablet and mobile previews.

Column Height & Width in GoHighLevel Layouts

Columns are key to responsive design in GoHighLevel. They determine how elements line up and how space is distributed across the page.

Column Width in GoHighLevel Sections

When you select a column, you can adjust how much of the section’s total horizontal space it occupies. Common patterns include:

  • Single-column layouts (100% width)
  • Two-column layouts (50% / 50%, 30% / 70%, etc.)
  • Three or more columns with evenly or unevenly distributed widths

The column width controls how much space elements can use inside that column, so it effectively sets a maximum width for child elements unless those elements have their own constraints.

Column Height Controls in GoHighLevel

Column height is typically determined by the content inside it. However, in GoHighLevel, you can influence column height by:

  • Using Full Height on elements to stretch them to fill the column.
  • Adding padding or margins in the column settings.
  • Setting height preferences at the section level (for example, full viewport height layouts).

This makes it easier to create equal-height columns and visually balanced rows.

Section-Level Height & Width in GoHighLevel

Sections are the outermost containers in the GoHighLevel page builder. They span the full width of the canvas by default, but you still control their effective width through content width settings and padding.

Section Height Options in GoHighLevel

In the section settings panel, you can typically choose:

  • Auto height for sections that simply wrap around their content.
  • Full screen or similar options for hero sections that fill the entire viewport height.
  • Manual height adjustments via padding at the top and bottom.

Using a full-height section is useful for modern hero designs, opt-in pages, or headline blocks that should fill the screen on initial load.

Section Width & Content Area

While the outer section spans the full browser width, you often control the inner content area using:

  • Content width settings such as boxed or full width.
  • Horizontal padding and margins.
  • Maximum width containers inside the section.

This combination lets you create edge-to-edge backgrounds with centered, readable content.

Practical Workflow: Adjusting Sizes in GoHighLevel

Follow this step-by-step process to adjust height and width in the GoHighLevel page builder:

  1. Open your funnel or website in the GoHighLevel page builder.
  2. Select the relevant layer: section, column, or element depending on what you want to resize.
  3. Go to the settings panel on the right side of the builder.
  4. Adjust width:
    • For sections: set content width and padding.
    • For columns: select column width proportions.
    • For elements: use the width option or custom width field when available.
  5. Adjust height:
    • Set Auto or Full Height for elements that support these settings.
    • Use section height options (such as full viewport) for hero sections.
    • Add padding to create extra vertical space when needed.
  6. Preview on all devices using the desktop, tablet, and mobile icons.
  7. Fine-tune spacing with margins and padding until the layout looks clean and balanced.

Best Practices for Size Controls in GoHighLevel

To keep your designs predictable and responsive in GoHighLevel, follow these practices:

  • Use Auto height for most text and button elements.
  • Reserve Full Height for hero sections, background images, or feature blocks that must fill available space.
  • Adjust column widths before manually constraining many individual elements.
  • Use padding rather than fixed heights to create space, improving responsiveness.
  • Always preview on mobile, as height and width combinations can behave differently on small screens.

Additional GoHighLevel Resources

For the official reference on height and width controls in the page builder, visit the GoHighLevel help article here: GoHighLevel Height & Width Controls for Page Builder Elements.

If you need strategic implementation support, funnel builds, or marketing automation consulting around GoHighLevel, you can also explore expert services at Consultevo.

By mastering height and width controls at the element, column, and section levels, you can unlock the full design potential of the GoHighLevel page builder, delivering polished, conversion-focused pages that remain fully responsive across devices.

Need Help With ClickUp?

If you want expert help building, automating, or scaling your GHL , work with ConsultEvo — trusted GoHighLevel Partners.

Scale GoHighLevel

“`