Layout Width & Spacing
This page demonstrates how global layout width and spacing settings affect sections and rows across different screen sizes using Divi Responsive Helper.
Ultra-Wide Screens (Above 1899px)
On ultra-wide screens, the default section top and bottom padding is reduced from 4% to 2%. The row width and max-width are set to 90%, allowing content to span wider displays while maintaining balanced spacing.
Wide Screen Size (1600px – 1899px)
At the widescreen breakpoint, the section top padding is reduced from 4% to 3%, while row padding is increased to 1%, creating a more comfortable layout for large desktop and laptop screens.
Tablet Wide (1021px – 1150px)
At the tablet wide breakpoint, the layout tightens by setting the row width and max-width to 80%, reducing section padding to 2%, and applying 2% row padding for improved readability on tablets.
Your Title Goes Here
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Your Title Goes Here
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Your Title Goes Here
Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.
Phone Wide (421px – 860px)
At the phone wide breakpoint, the row width and max-width are set to 85%, section padding is reduced to 45px, and row padding is increased to 1% to optimize spacing for smaller screens.
Note: Layout Width & Spacing settings are applied globally and automatically affect all sections and rows across the site. These examples show how the same layout adapts at each breakpoint. Resize your browser window to see the spacing and width changes in real time.