How to change Divi responsive settings? - css

Question

I built website on divi for a while now. I tried many times to change Divi built in responsive settings.
Most of my bugs are on effects, like moving up and down according to screensize; when it work out on a 13 inch it's totally messed up on a 27 inch
But my main problem is that the phone version goes from 320px up to 768px which is not adapted for little tablets.
I'ld like to change that built in breakpoint settings to something like 500px max for mobile version and then have a little tablet version from 501px to 1099 and have a classic pc version from 1100px to 1650px and then have a big screen setting... That would be nice to make it perfectly responsive.
Do you have any idea ?
If there is no solution through divi builder, is there any chance to do something through CSS ?
I've tried to reach Divi's expert on Malt but they were not able to answered me.
I've tried some CSS but it didn't work out. I know that it is possible to customise some sections, row, column to a specific screen size and sometimes I managed to do what I want sometimes thanks to that.
I also tried to look at the .php files but I've to say : I'm not an expert... and didn't find anything.
I was expecting to be able to customise divi's breakpoint with my own value.
To do something like that : I'ld like to change built in breakpoint setting to something like 500px max and then have a little tablet version from 501px to 1099 and have a classic pc version from 1100px to 1650px and then have a big screen setting... That would be nice to make it perfectly responsive.

Answer 1

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: https://www.peeayecreative.com/product/divi-responsive-helper/ 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.