Skip to main content
Using Divi Sizing Options

Divi Sizing Options make it easy to adjust the sizing of sections, rows, columns, and modules in Divi.

Updated over a week ago

Divi Sizing Options make adjusting the sizing of Sections, Rows, Columns, and Modules easy.

Sizing is an essential part of building beautiful websites.

Adjusting the height and width of elements in Divi is made easy with Divi Sizing Options, keeping your website organized, well-balanced, and responsive.

Sizing Terms and Definitions

The Sizing Settings Group is common across all Divi elements and uses many of the same values and properties.

Before diving in, let’s define some of these terms to know what we’re working with.

Where to find Divi Settings Options
  • Width - Defines the actual width of an element.
    If this is set to 100%, the element will be as wide as its container allows.

Recommendation: We recommend using % values when setting width so that it automatically adapts as the browser window changes.

The higher the percentage, the wider the element will be; the lower the percentage, the narrower the element.

  • Max Width - Defines the absolute maximum width allowed for an element.
    So if the width is set to 100% and the Max Width is set to 80%, the element will only reach 80% because the Max Width supersedes the width.

  • Height - Defines the actual height of the element.

Recommendation: We recommend setting height in pixels (px) so that your design elements retain their height as the browser window changes size and becomes mobile responsive.

  • Min Height - Defines the minimum height of an element.
    The element's height will not go smaller than the minimum height set. This supersedes the height value.

Example: If the Height is set to 200px and the Min Height is set to 300px, then the element will be at a minimum of 300px tall.

  • Max Height - Defines the absolute maximum height allowed for an element.

Example: if the Height is set to 200px and the Max Height is set to 150px, the element will only reach a height of 150px because the Max Height supersedes the height value.

  • Alignment -Defines the position of the design element you're working on. You can align elements:

    • To the left

    • In center

    • To the right

Note: A few more width and height options are available within specialty sections. Those options are described in detail in this guide's Specialty Section Sizing section.

Examples of sizing in Divi Sizing Options

Divi's Default Sizing

Divi comes preloaded with default sizing that helps speed up your design process.

By default:

  • Sections - are set to 100% width and span the entire viewport.

  • Rows - are set to 80% width by default

  • Columns - are set to 100% width

  • Modules - are set to 100% width by default so that they fill up the entire row container.

These default sizing options remain the same for mobile devices, making your design responsive.

Default sizing in Divi Sizing Options

Length Units Used for Sizing

In the world of CSS, an element's size (or length) is expressed by length units.

Length units are small letters/symbols that follow a number value (10px, 2em, 100%, etc.) to establish the length of an element.

Length units are often separated into two main categories:

  • Absolute

  • Relative.

Absolute Length Units

Absolute length units are considered absolute because they are not relative to any other element.

These units will not scale to browser size and will remain the same size.

These include the following:

  • pt – points

  • px – pixels

  • in – inches

  • cm – centimeters

  • mm – millimeters

  • pc – picas

Important note: Pixels are the only absolute CSS length unit we should consider using for the web.

The others are mostly used for physical (not digital) measurements (like print).

A pixel unit refers to the size of one dot of your device display (which will vary slightly with each device).

Because of this, pixels are commonly used for things that don’t necessarily need to scale with browser sizes.

Relative Length Units

Relative Length units are considered relative because they change/scale depending on the length of other elements.

One common example is percentage, which depends on the parent element's length.

  • em – relative to the element’s font size

  • rem – relative to the root element’s font size

  • vw - relative to 1% of your browser’s viewport width

  • vmin – relative to 1% of the smaller of the two browser viewport dimensions (height or width).

  • vmax – relative to 1% of the larger of the two browser viewport dimensions (height or width).

  • % – relative to 1/100 of the parent element’s width.

Suggested Length Units

These are the suggested length units for Width, Height, Margin, and Padding:

  • Width: %, vw, and px (as max width)

  • Height: %, vw, and px (as max height)

  • Margins: px, %, and vw

  • Padding: px, %, em, vw and vh

A Guide to Understanding and Applying CSS Length Units in Divi

For more information on length units, please check out our A Guide to Understanding and Applying CSS Length Units in Divi.

A Guide to Understanding and Applying CSS Length Units in Divi

How to Adjust Sizing in Divi

You can adjust sizing options in Divi in two ways:

  1. Via the element's settings group

  2. In the visual builder, use the drag element controls.

Input Values & Range Slider

  1. Open up element settings by clicking on the gear icon

  2. Navigate to the Design tab

  3. Click on the Sizing option group to expand that settings group

  4. Input a numeral value or drag the range slider.

How to adjust sizing in Divi Sizing Options

Draggable Sizing Controls For Divi

If you like using the Visual Builder for most edits, you'll love the draggable sizing features Divi offers!

Instead of having to manually open a settings panel and type in sizing values, you can instead drag to adjust the elements on the page and see the results instantly.

This new UI innovation allows you to easily adjust the width, height, margin and padding of any module, Row, or section. Learn more about draggable controls here.

Draggable Sizing Controls For Divi

Sections, Rows, and Module Sizing

Let's take a look at the Sizing Options available within Divi's design elements.

Section Sizing Options

Within the section settings, you have the following sizing options:

  • Width

  • Max Width

  • Section Alignment

  • Min Height

  • Height

  • Max Height

You can drag the range slider or input numerical values to edit these values in the input field.

Section Sizing Options

To set mobile styles, hover over the value you want to change and click the phone icon , enabling Divi's Responsive Settings.

Three tabs will appear:

  • Desktop

  • Tablet

  • Phone

Tab through them to set specific values.

By default, the mobile sizing will inherit what is set on the Desktop view, however, with this option, you can set unique sizing values for mobile.

How to set mobile sizes in Divi Sizing Options

Fullwidth Sizing Options

In addition to the standard width and height options, Fullwidth sections have additional sizing options.

  • Content Width - Elements will extend to the full width of their parent element. However, in fullwidth sections, you can adjust the width of the inside content.

  • Content Max Width - Setting a maximum width for the content width will prevent the inner content from ever surpassing the value you specify here.

Fullwidth Sizing Options

To set mobile styles, hover over the value you want to change and click the phone icon , enabling Divi's Responsive Settings.

Three tabs will appear:

  • Desktop

  • Tablet

  • Phone

Tab through them to set specific values.

By default, the mobile sizing will inherit what is set on the Desktop view; however, with this option, you can set unique sizing values for mobile.

Max-width mobile styles in Divi Sizing Options

Specialty Section Sizing Options

In addition to the standard width and height options, Specialty sections have additional sizing options.

  • Equalize Column Heights - Force all columns to assume the height of the tallest column in the Row. All columns will have the same height, keeping their appearance uniform.

  • Use Custom Gutter Width - Gutter width is the margin space between columns. You can increase or decrease the gutter width by typing in a numerical value or dragging the range slider. The gutter width is set as a percentage

    • Value 1 - no space in between columns

    • Value 2 - 3% of space in between columns

    • Value 3 (default value) - 5.5% of space in between columns

    • Value 4 - 8% of space in between columns

  • Inner Width - By default, elements will extend to the full width of their parent element. However, in specialty sections, you can adjust the width of the inner content inside specialty sections.

  • Inner Max Width - Setting a maximum width for the inner content of specialty sections will prevent the inner content from surpassing the value you specify here.

Specialty Section Sizing Options

To set mobile styles, hover over the value you want to change and click the phone icon , enabling Divi's Responsive Settings.

Three tabs will appear:

  • Desktop

  • Tablet

  • Phone

Tab through them to set specific values.

By default, the mobile sizing will inherit what is set on the Desktop view; however, with this option, you can set unique sizing values for mobile.

Divi Sizing Options

Row Sizing Options

In addition to the standard width and height options, rows have two additional options.

  • Equalize Column Heights: Equalizing column heights will force all columns to assume the height of the tallest column in the Row. All columns will have the same height, keeping their appearance uniform.

  • Use Custom Gutter Width - Gutter width is the margin space between columns. You can increase or decrease the gutter width by typing in a numerical value or dragging the range slider. The gutter width is set as a percentage

    • Value 1 - no space in between columns

    • Value 2 - 3% of space in between columns

    • Value 3 (default value) - 5.5% of space in between columns

    • Value 4 - 8% of space in between columns

Row Sizing Options

How To Adjust Columns

There are two ways to do it.

  1. Hover over the Row and click the gear icon to set the row settings. Then click the dropdown menu under Column Structure to change the column structure. You can also drag and drop the column items to rearrange them.

  2. Hover over the Row, click the column icon, and select your desired column structure.

Module Sizing Options

Within the module settings, you have the following sizing options:

  • Width

  • Max Width

  • Section Alignment

  • Min Height

  • Height

  • Max Height

You can drag the range slider or input numerical values to edit these values in the input field.

Module Sizing Options

To set mobile styles, hover over the value you want to change and click the phone icon , enabling Divi's Responsive Settings.

Three tabs will appear:

  • Desktop

  • Tablet

  • Phone

Tab through them to set specific values.

By default, the mobile sizing will inherit what is set on the Desktop view; however, with this option, you can set unique sizing values for mobile.

Divi Sizing Options mobile sizing

Tips & Best Practices for Using Sizing Options

When using Divi's Sizing Options, keep these tips in mind!

Use Relative Length Units for Width

To keep your design mobile responsive, it's best to use relative length units for width values such as % or vw.

This means the container's width will automatically adjust based on the percentage or viewport width you set. It's an easy way to create responsive design elements!

Use relative length units in Divi Sizing Options

Keep Spacing in Mind When Setting Sizing

Spacing and sizing go hand in hand in web design. While sizing controls the overall element's size and height, spacing inside will add padding surrounding the content.

While your container, say its width is set to 100% width, if you've added padding inside that row container, your concontainer'sbe 100% the width of its row container.

Keep spacing in mind with Divi Sizing Options

Adjust Sizing Options for Mobile

While Divi is built to be mobile responsive, reviewing your design on mobile devices is always good. It’s easy to do so with Divi’s view mode.

  1. Enable the Visual Builder.

  2. Click the mobile icon at the bottom left of the bottom Divi toolbar.

To switch between devices, click the dropdown menu at the top.

Adjust sizing options for with mobile Divi Sizing Options

Continue Learning:

Did this answer your question?