How to Change Divi Responsive Settings?

I've been having the same problem for years now. Divi doesn't really seem to care at all about the fact that responsiveness has become a lot more complicated than just two breakpoints. I haven't found any helpful plugin or extension that's free. You might want to look at this one: I haven't bought it myself but it seems to have everything I want to customize the breakpoints.

But still today I just use CSS in the Theme Options of Divi to create my own breakpoints.

For example, the menu changes to a hamburger at 980PX but this screws it all up 'till you get to about 1200px. So in the CSS is use this:

@media(max-width:1200px){
  .et_pb_menu__menu {
     display: none !important;
  }
  .et_mobile_nav_menu {
     display: block !important;
  }
}

Also, Divi tends to hide empty columns, even if the heave a background and a set height. So I always give those columns a class of divi-hidden-100pr or divi-hidden-50vh depending if you can set the height on percentage or if need need to set the height yourself. Then in Theme Options this is my CSS:

   @media(max-width:1200px){
    .divi-hidden-100pr,
    .divi-hidden-50vh {
        display:block !important;
    }
    .divi-hidden-100pr {
        height:100% !important;
    }
    .divi-hidden-50vh {
        height:50vh !important;
    }
   }

In this case the heigt is 50vh or 100% you can set the 50vh to whatever you prefer. Maybe the reason why your CSS didn't work is because you did use !important I know that it's a CSS crime to use this, but Divi doesn't seem to care and uses this a lot. So if you don't use it, your CSS probably won't work.

Problem however with this custom CSS, you'll still get you're margins, paddings, font-size etc set for the desktop. So pretty soon you custom CSS in Theme Options wil grow bigger and bigger and you'll have to change some desktop design settings to make your responsive custom CSS work

For example:

If you want a different font-color on a device you should set the font color for desktop in the custom CSS part of the module, not in de Design tab. If you set it in the Design tab it will bet set with !important and no matter where you put you're custom responsive CSS, it wil always be overruled by the Divi settings.

hope this helpen you a bit. Hope Divi will realize soon that there's more than 5 devices out there with different sizes.