This part of the Divi 5 Mastery Course walks you through the final responsive pass on your coworking space website.
By now, the homepage, inner pages, and global templates are built, and much of the responsiveness is already in place thanks to Design Variables, Presets, Flexbox, and CSS Grid. In this course, you'll audit the full site, fine-tune key layouts with Divi 5's responsive tools, and keep everything consistent from phone to ultra-wide screens.
Divi 5 Responsive Tools You'll Use Most
Divi 5 gives you a focused set of tools for editing layouts across screen sizes. You used many of these while building the site, so treat this as a practical recap before the audit.
Customizable Breakpoints
The Page Bar at the top of the Visual Builder holds the responsive controls.
Divi 5 includes seven customizable breakpoints:
Phone,
Phone Wide,
Tablet,
Tablet Wide,
Desktop,
Widescreen, and
Ultra Wide.
Click the ellipsis in the responsive menu to reveal them, then toggle on any extra breakpoint you want to target - for example, Phone Wide for more control between phone and tablet widths, or Ultra Wide to check larger displays.
Canvas Scaling
Start your audit on Desktop, then move to Tablet, and finish on Phone. When you need precision, enter an exact width in the responsive width field, or drag the edge of the Canvas to resize the preview and test how the design responds in real time.
Responsive State Picker
When you select an element, the settings panel includes a state picker.
Use it to choose which breakpoint or interaction state you are editing - Desktop, Tablet, Phone, Hover, Focus, Checked, Active, or Sticky. For this pass, you'll mostly use the breakpoints, but it's worth checking interactive states on buttons, forms, and sticky elements.
Responsive Editor
The Responsive Editor lets you review and edit values across breakpoints from one panel. Click the Edit Responsive Values icon next to a setting to open it. This is ideal for typography, spacing, alignment, and column sizing that need small breakpoint-specific changes.
Structure Templates and Display Order
Structure Templates change column layouts per breakpoint, so a three-column desktop layout can become a single-column mobile stack without rebuilding the section.
The Display Order setting, found in each Column's settings, changes the visual order of Columns on smaller screens without moving modules or relying on Visibility settings.
Design Variables
Your Design Variables keep responsive design consistent. Because many typography and spacing values use fluid CSS functions like clamp(), much of the site already scales between breakpoints. When a value needs to change everywhere, update it in the Variable Manager so related presets and modules stay connected instead of creating one-off fixes.
Flexbox and CSS Grid
At the Row, Column, and Group level, Flexbox and CSS Grid control how layouts adapt. With Flexbox, adjust Layout Direction, Layout Wrapping, Justify Content, Align Items, and Horizontal or Vertical Gap per breakpoint. With CSS Grid, change the number of columns or rows and adjust grid item placement for each screen size.
The Recommended Responsive Workflow
A consistent audit process keeps changes organized and stops you fixing the same issue several different ways.
Start with the homepage, since it sets most of the site's visual patterns.
Review the inner pages and reuse the decisions you already made.
Check your Theme Builder templates, especially the global header and footer.
Use the Style Inspector and Layers View panel to catch inconsistencies.
Use a Desktop-First Review
Start with the Desktop breakpoint and confirm the base layout on Desktop
Change to Tablet breakpoint and make structural adjustments
Finish on Phone breakpoint, where spacing, stacking, and touch targets usually need the most attention.
Because the design system is built around fluid variables and reusable presets, most adjustments are small refinements rather than rebuilds.
Use Builder View Tools
Drag the Canvas resize handle on the right edge to test different widths without switching breakpoints for every check.
Turn on X-Ray Mode when adjusting spacing or structure - it outlines layout elements so container boundaries are clearer.
Use Wireframe Mode for a high-level view of page structure, especially on long pages.
Use the Style Inspector for bulk checks, reviewing spacing, presets, and key style values across multiple elements at once.
Know Where to Make Responsive Changes
Use local styles when an adjustment is specific to a single section - the homepage hero might need slightly different mobile spacing than other sections.
Update Presets and Variables when the change should apply everywhere - if every button needs different mobile padding, update the Button preset instead of editing each button.
After a local change, ask yourself whether it belongs in a Preset; if so, save it and use Extend Attributes to apply it across the page where appropriate.
Refining the homepage responsiveness
Your homepage already has a strong responsive foundation. The goal here is refinement: tighten spacing, improve typography, check touch targets, and make sure each section feels intentional across breakpoints. Work Desktop to Tablet to Phone, adding extra breakpoints only where needed.
Hero Section
Confirm the main headline uses the Heading 1 Big element preset so it scales fluidly.
Use the Responsive Editor to fine-tune line height at Tablet and Phone if the text feels too tight or loose.
On the Phone breakpoint, stack the two hero buttons vertically:
Select the Group module containing the buttons
From the Desing tab → Layout → Layout Direction, choose Column.
Ensure that the Vertical Gap is set to Spacing - XSmall variable.
Change the Align Items to Center.
Confirm the three-column row at the bottom of the hero stacks cleanly on Phone breakpoint, with centered alignment and balanced top borders.
Ensure you have the Phone breakpoint selected.
Open the Row's settings.
From the Content tab → Element, click the Apply Strucutre Template and choose a 1 column template.
From the Desing tab → Layout, apply the Spacing - Small variable for the Vertical Gap.
For each Column:
In the Desing tab → Layout, apply the Spacing - XSmall for the Vertical Gap.
In the Desing tab → Spacing → Padding → Padding Top, set it to 0px.
If the headings feel uneven on Tablet, update the Heading 4 preset - for example, apply an H4 Tablet variable to reduce the Heading Text Size to 20px.
Using the Responsive State Picker, select Phone and change the Heading Text Size to the H2 Mobile variable, such as 24px, if it fits the layout better.
Features Grid Section
The first Features section relies on CSS Grid.
In the Row's Desing tab → Layout, confirm the Number of Columns changes from three on Desktop to two on Tablet and one on Phone.
Tighten the Vertical Gap on mobile if the cards feel too spread out, using the Spacing – Medium variable so the layout stays spacious without feeling loose.
Split Features Section
The second Features section uses a split layout.
On Tablet, check whether the image and content stack cleanly.
Click the Apply Structure Template button in the Row's Elements option group to switch the Row to a single-column layout on the Tablet breakpoint.
You may notice extra white space beside the supporting feature blocks. Inside the second Column are three Module Groups - the first holds the introductory text and should stay full-width, while the second and third can sit side by side on Tablet.
To arrange the supporting blocks:
Add a new Module Group directly below the first Group.
Drag the second and third Groups into this new parent Group.
From the Desing tab → Layout, change the parent Group's Layout Direction to Row on Tablet so the two supporting blocks sit next to each other.
On the Phone breakpoint, switch that parent Group back to Column so the blocks stack vertically and stay easy to read.
Review the Remaining Homepage Sections
Review Testimonials, Pricing, Countdown, and FAQ for any remaining inconsistencies. Pay attention to spacing between elements, Row structure on smaller screens, button and form size, and touch targets on Phone, and confirm typography scales consistently. Most sections should need little or no adjustment.
Ensuring Inner Pages Are Fully Responsive
The patterns you refined on the homepage carry into the rest of the site. Your task here is to catch page-specific issues, especially on the Contact and Events pages, which include forms, maps, event cards, countdowns, and email opt-ins.
Check the Contact page
Divi 5's form field options let you control sizing at the field level.
In Phone view, click into any field you want to adjust.
In the Design tab, expand the Sizing option group, locate the Column Class field, and set it to Fullwidth.
To reduce extra white space, select the first Section, go to the Design tab, expand the Layout option group, and apply the Spacing – Medium variable to the Vertical Gap field.
Use Page Manager to Move Between Pages
Click the Page Manager icon in the Builder's Left Sidebar
Type in the name of the page you want to switch to without leaving the Visual Builder.
When enabled, Speculative Prerendering speeds up page-to-page transitions by loading likely destinations in the background.
Check the Events page
Confirm that event cards collapse cleanly on Tablet and Phone. Check date blocks, event details, pricing, buttons, and alignment on smaller screens. If a layout feels cramped, adjust the Row structure with a Structure Template, reduce column counts, or update Flexbox alignment and gap values at the relevant breakpoint.
Quick Inner Page Audit Checklist
Go through each inner page and ask:
Do all multi-column Rows collapse properly using Structure Templates?
Are buttons and touch targets large enough on mobile?
Does typography scale consistently with the homepage?
Are there awkward gaps, cramped areas, or overflowing elements?
Do forms, maps, countdowns, and opt-ins remain easy to use on Phone?
Perfecting global templates
Global elements like the header and footer appear across the site, so improvements you make in the Theme Builder apply site-wide. Enable Show Theme Builder Layouts in the Builder Settings to review headers, footers, and page content together inside the Visual Builder.
Responsive header
Make sure the logo scales appropriately - clear, without taking too much vertical space on smaller screens.
Confirm the main navigation transitions cleanly from the desktop layout to the mobile menu at Tablet and Phone.
Fine-tune bottom padding on the sticky header if it takes up too much space on mobile.
For a cleaner preview, turn off the setting that dims disabled elements to 50% opacity when you want the preview closer to the final front-end output.
Responsive footer
Adjust Column widths using the Column Class field in the Sizing option group so footer content flows logically on Tablet and Phone.
Use number variables to keep footer typography consistent with the rest of the design system.
Check the alignment of social icons and adjust spacing where needed.
Adjust the gap so the footer doesn't feel cramped or overly tall on smaller screens.
Read the Full Tutorial
Read the complete step-by-step guide on the Elegant Themes blog: Part 12: Making Your Divi 5 Website Fully Responsive.
Previous Course | Next Course |