I love using ET’s Divi theme but sometime there are things that they did that make no sense, like this one.  For some reason they decided it would be a good idea to add a right and left margin or padding to all of the ‘Specialty Sections’ and when you enable the ‘Fullwidth’ option in the ‘Advanced Design Settings’ tab it doesn’t actually work.  Well, with a bit of CSS you can fix it!

The first thing you need to do is select one of the ‘specialty section‘ layouts of your choice, any one will work.

Now open up the Section Settings, click on the ‘Custom CSS tab’ of your section and add in a Custom CSS Class, I’m using ff-fullwidth-specialty, then save & exit

In the specialty section ‘Advanced Design Settings’ tab there are options to make the section fullwidth. However, this doesn’t work like it does on standard sections and your content will not reach to the edge of the screen as you would expect it to so there is no need to activate it, we are going to do that with CSS instead.

Copy and paste the code below into your Child Theme style.css or if you aren’t using a child theme (which you really should be) then paste into the Divi Theme Options epanel custom CSS section and don’t forget to save.

/*--------------Fullwith Specialty Section----------------------*/
 .ds-fullwidth-specialty> .et_pb_row {
 min-width: 100% !important;
 }

Now you will need to add in the columns, rows and modules you want to use in your specialty section. I’m not going to go through each one as with nine layouts to choose from and 40+ modules there are too many variations to consider, but you get the idea.

You will also need to play around with the padding values in the section, rows and modules to get it looking just how you want.

Accordion using no custom Gutter