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.
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 to100%and the Max Width is set to80%, 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.
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 defaultColumns - are set to
100%widthModules - 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.
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– pointspx– pixelsin– inchescm– centimetersmm– millimeterspc– 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 sizerem– relative to the root element’s font sizevw- relative to 1% of your browser’s viewport widthvmin– relative to 1% of the smaller of the two browser viewport dimensions (height or width).vmax– relative to1%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, andpx(as max width)Height:
%,vw, andpx(as max height)Margins:
px,%, andvwPadding:
px,%,em,vwandvh
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.
How to Adjust Sizing in Divi
You can adjust sizing options in Divi in two ways:
Via the element's settings group
In the visual builder, use the drag element controls.
Input Values & Range Slider
Open up element settings by clicking on the gear icon
Navigate to the Design tab
Click on the Sizing option group to expand that settings group
Input a numeral value or drag the range slider.
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.
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.
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.
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.
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.
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 columnsValue
2-3%of space in between columnsValue
3(default value) -5.5%of space in between columnsValue
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.
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.
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 columnsValue
2-3%of space in between columnsValue
3(default value) -5.5%of space in between columnsValue
4-8%of space in between columns
How To Adjust Columns
There are two ways to do it.
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.
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.
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.
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!
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.
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.
Enable the Visual Builder.
Click the mobile icon
at the bottom left of the bottom Divi toolbar.
To switch between devices, click the dropdown menu at the top.
