Divi Specialty Sections let you create more complex column layouts than standard sections, such as combining a large column with smaller rows of columns beside it.
On mobile, however, Divi will normally stack the elements in a Specialty Section vertically. This works well for many layouts, but it can take up more space than necessary when the section contains compact content such as images, icons, buttons, short blurbs or small feature blocks.
This tutorial shows you how to display Divi Specialty Section columns side-by-side on mobile in Divi 4 using a small CSS snippet.
Note: This tutorial is for Divi 4 Specialty Sections. Divi 5 no longer uses Specialty Sections in the same way, as these layouts are handled using the newer Flexbox and Grid section options.
This method is for Specialty Sections. If you are working with a standard Divi row, use the standard two-column mobile method instead.
Quick answer:
To display Divi Specialty Section columns side-by-side on mobile in Divi 4, open the Specialty Section settings, go to "Advanced → Custom CSS → Free-Form CSS", and add:
selector .et_pb_row {
display: flex;
flex-wrap: nowrap;
}Show Divi Specialty Section Columns Side-by-Side on Mobile
If you are using a Divi Specialty Section, the standard row method for displaying columns side-by-side on mobile may not work as expected. That is because the row settings are applied only to certain parts of the Specialty Section layout.
To make the Specialty Section content line up on mobile, we can instead add CSS to the Specialty Section itself and target the rows inside it.
Open the Specialty Section's Settings
Locate the specialty section you want to modify, or add it to your layout if you haven't already. Then, hover over the section to reveal the orange section buttons. If your Divi Builder is set to use "Click" mode, you may need to click on the section instead of hovering. Click the "Gear" icon to open the section's settings.
Set the Specialty Section Row to Flex Mode using CSS
Now, click on the "Advanced" tab in the specialty section settings, then "Custom CSS". Under "Free-Form CSS", add the following CSS:
selector .et_pb_row {
display: flex;
flex-wrap: nowrap;
}
Save your Changes
To save the changes to the section, click the green check mark button at the bottom of the row settings. Then, when you are ready, save the whole page by opening the Page Settings toolbar, by clicking on the round purple "three-dots" button at the bottom of the visual builder are, and clicking on the "Save" button.
View the Result
Now take a look at your Specialty Section on the front-end. The exact result will depend on the Specialty Section layout you are using, but the section content should now remain side-by-side on mobile instead of stacking vertically.
For example, a Specialty Section with an image module beside a two-column row would normally place the two-column row below the image on mobile. With this CSS applied, the image and columns can line up side-by-side instead.
Displaying multiple modules side-by-side on mobile can create a tight fit on narrow screens. If needed, use Divi’s built-in sizing and spacing options to reduce padding, adjust image sizes, change font sizes, or simplify the content inside each column.
Troubleshooting
If your Specialty Section columns are still stacking after following the steps above, check the following:
Make sure you edited the Specialty Section, not a regular row or module – This CSS needs to be added to the Specialty Section settings so it can target the rows inside the section.
Make sure the CSS was added to Free-Form CSS – Open the Specialty Section settings, go to Advanced → Custom CSS, and add the CSS under Free-Form CSS.
Check that you are using the full CSS snippet – The "selector" part is important because it tells Divi to apply the CSS only inside the current Specialty Section.
Try adding !important if another style is overriding it – In some layouts, another style may override the flex settings. If that seems to be happening, you can try:
selector .et_pb_row {
display: flex !important;
flex-wrap: nowrap !important;
}Check whether the layout is too wide for mobile – Specialty Sections can contain several elements, so keeping everything side-by-side may create a very tight layout. Try reducing padding, image sizes, font sizes, or the amount of text inside each module.
Test the front-end, not just the builder preview – The Visual Builder preview is useful, but always check the published page on an actual mobile device or browser mobile preview.
Improve Your Mobile Layout Further
Now that your Specialty Section content is sitting side-by-side on mobile, you may want to fine-tune the layout or adjust how other Divi mobile columns behave.
If you are working with a standard Divi row instead of a Specialty Section, see:
Display Two Divi Columns Side-by-Side on Mobile
If you need to adjust font sizes, spacing, images or other module settings only on mobile, see:
Conclusion
There we have it. You can keep Divi Specialty Section columns side-by-side on mobile by adding a small flexbox CSS snippet to the Specialty Section’s Free-Form CSS field.
Once the section content is side-by-side, take a moment to check the layout on a real mobile device. Specialty Sections can become quite narrow on mobile, so you may need to fine-tune the spacing, font sizes, image sizes or amount of content in each module.
I hope this helps. If your Specialty Section columns are still stacking, if the mobile layout doesn’t look quite right, or if you’re working with a different Specialty Section layout, please ask in the comments and I’ll try to help.
0 Comments