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

Divi Size Options make adjusting the size of sections, rows, columns and modules simple.

Size is an essential part of creating attractive websites.

Adjusting the height and width of items in Divi is easy thanks to its Size Options, allowing you to keep your website organized, balanced and adaptable to different devices.

Terms and definitions on size

Before we go deeper, we define some of these terms to know what we are working with.

Where to find Divi Settings Options

• Width: defines the actual width of an element.
  If set to 100%, the item will be as wide as its container permits.

• Recommendation:It is recommended to use values in % when setting the width to adapt automatically when you resize the browser window.
  The higher the percentage, the wider the element will be; the smaller it is, the narrower it will be.

• Maximum width: defines the maximum absolute width allowed for an element.
  For example, if the width is 100% and the maximum width is 80%, the element will only reach 80% because the maximum width takes precedence over width.

• Alto: defines the actual height of the element.
  Recommendation:It is recommended to set the height in pixels (px) so that the elements remain height when resizing the browser window and remain compatible with mobile devices.

• Minimum height: defines the minimum height of an element.
  The height of the element shall not be less than the established minimum height. It takes precedence over height value.

  Example:If the height is 200 px and the minimum height is 300 px, then the element will be at least 300 px high.

• Maximum height: defines the maximum absolute height allowed for an element.
  Example:If the height is 200 px and the maximum height is 150 px, the element will only reach 150 px because the maximum height takes precedence over height value.

• Alignment: define the position of the design element you are editing. You can align the elements:

  • On the left

  • To the center

  • On the right

  Note:There are some more width and height options available within the special sections. These options are described in more detail in the section onSpecial Sections Sizeof this guide.

Default size in Divi

Default:

• Sections: are set to 100% wide and cover the entire screen.

• Rows: have an width of 80% by default.

• Columns: have a width of 100%.

• Modules: have a width of 100% by default to fill the container in the row.

These default size options remain the same for mobile devices, making your design adaptable.

Units of length used for size

Units of length are small letters or symbols that follow a numerical value (10px, 2em, 100%, etc.) to set the length of an element.

Units of length are generally divided into two main categories:

• Absolutes

• Relatives

Absolute length units
They are considered absolute because they do not depend on any other element.

These units do not adapt to the size of the browser and remain the same size.

They include the following:

• pt - points

• px - pixels

• in - inches

• cm - centimeters

• mm - millimeters

• pc - spades

Important note:pixels are the only unit of absolute length recommended to use on the web.

The others are mainly used for physical (non-digital) measurements, as in printing.

A pixel unit refers to the size of a point on the device screen (which may vary slightly between devices).

That is why pixels are commonly used for elements that do not need to scale with browser size.

Relative units of length

A common example is the percentage, which depends on the size of the parent element.

• em em em- concerning the font size of the item itself

• rem rem rem- concerning the font size of the root element

• vw- relative to 1% of browser window width

• vmin- relative to 1% of the smaller dimension of the browser (high or width)

• vmax- relative to 1% of the larger dimension of the browser (high or width)

• %- concerning 1/100 of the width of the parent element

Suggested units of length

• Width: %, vw and px (maximum width)

• Alto: %, vw and px (maximum maximum)

• Margins: px, % and vw

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

Guide to understanding and applying length units of length in Divi style sheets

How to adjust the size in Divi

• Through the item Settings group

• Using drag controls in the visual builder

Input and slider values

• Open the item settings by clicking the gear icon

• Navigate to tabDesign

• Click on the options groupSizeto expand it

• Enter a numeric value or use the slider

Dragable size controls in Divi

Instead of manually opening a setup panel and writing values, you can simply drag to adjust the items on the page and view the results instantly.

This innovation in the interface allows you to easily adjust the width, height, margin and filling of any module, row or section. Learn more about dragable controls here.

Size of sections, rows and modules

Section Size Options

• Width

• Maximum width

• Alignment of section

• Minimum height

• Height

• Maximum height

You can drag the slider or enter numerical values in the corresponding field to edit these values.

---

To set mobile styleshover your cursor over the value you want to change and click on thephoneactivating theResponsive Settingsof Divi.

Three tabs will appear:

• Desk

• Tablet

• Telephone

Browse each other to set specific values.

By default, the mobile size inherits what is set in the desktop view; however, with this option you can define unique values for mobile.

Full width size options

• Width of content: the elements extend to the full width of the parent element, but in full-width sections you can adjust the width of the internal content.

• Maximum content width: by setting a maximum width, the internal content will never exceed the value you specify.
  

• Match column heights: forces all columns to assume the height of the highest column in the row, maintaining a uniform appearance.

• Use custom channel width: the space between columns (channel) can be adjusted by a numeric or slider value as a percentage:

  • Value 1 - no space between columns

  • Value 2 - 3% space

  • Value 3 (default) - 5.5% space

  • Value 4 - 8% space

• Inner width: by default, the elements extend to the full width of the father, but here you can adjust the width of the internal content.

• Maximum inner width: by setting a maximum width, the internal content will never exceed the indicated value.
  

• Match column heights(same behavior as in special section).

• Use custom channel widthwith the same values (%) as in special section.
  

There are two ways:

1. Hover your cursor over the row and click thegearto open adjustments, then change thecolumn structurefrom the drop-down menu. You can also drag and drop the column elements to reorder them.

2. Hover your cursor over the row, click thecolumnsand select the desired structure.

Module size options

• Width

• Maximum width

• Section alignment

• Minimum height

• Height

• Maximum height

You can use the slider or enter numerical values.

To set mobile styles, hover your cursor over the desired value and click thephoneenabling responsive settings. Tabs will appearDesk,TabletandTelephoneto define specific values. By default, the mobile size inherits desktop values, but with this option you can set unique values for mobile.

Tips and best practices for using Size Options

• Use relative units for widthTo maintain adaptable designs on mobile, it is better to use relative units such as % or vw for width values. This allows the width of the container to be automatically adjusted according to the browser window.

• Consider spacing into account when adjusting sizes
  Spacing (fill) influences the size of internal content. For example, if a container is 100% width and contains filling, the actual content will be lower.

• Adjust size options for mobile
  Although Divi is designed to be responsive, it is a good idea to review your design on mobile phones. Activate the visual builder, click themobilein the lower-left corner of the Divi bar and switch devices using the top drop-down menu.

• How to create a fixed pop-up contact form using Size Options

• How to optimize logo size on mobiles in the full width menu module

• How to create sections with effect when passing the mouse using new size and overflow options

• Use the new height and width options to create responsive design

• Mobile design best practices: how to use vw, vh and rem for fluid pages in Divi