What about the new Divi responsive preview update?
You probably know by now that Divi released their own built-in preview size feature after our plugin became popular. However, the new feature is limited and frustrating. Here are a few things to keep in mind:
| Divi Responsive Helper | Divi |
| Released April 2020 | Released November 2020 |
| Works for ANY screen size | Limited to 981px and smaller |
| Works for all laptop sizes | Does not work for laptop sizes |
| Works for all desktop sizes | Does not work for desktop sizes |
| Settings conveniently out of the way in page settings | Settings area takes up large chunk of the screen height |
| Full 100% screen preview area | Small preview area |
| Can be enabled or disabled | Permanently enabled |
| Option in 2.0 to completely disable the Divi preview size feature | No option to disable feature |
| New features/improvements always being added | Most Divi features do not receive updates or improvements |
Because of these limitations and frustrations, we created a setting in the Divi Responsive Helper to completely disable this Divi feature. Learn more about it in our Disable Divi Responsive Views documentation.Â
Does this plugin add more breakpoints?
Our plugin gives you live custom preview sizes. The custom preview sizes are not CSS breakpoints. Most of the time you do not actually need more breakpoints. Instead, you should use our plugin’s custom preview size or presets to find the perfect balance of settings for the existing Desktop, Tablet, and Phone breakpoints.
Breakpoints vs. Previews
Remember, the custom preview sizes are not actually breakpoints, but only preview sizes. I firmly believe we do not need more breakpoint sizes (except for occasional special circumstances). The Divi Responsive Helper works perfectly within the default Divi breakpoints, allowing you to adjust the existing three Desktop, Tablet, and Phone breakpoints to pixel perfection.
There are three breakpoints in Divi, which are hardcoded into the theme. Those are Desktop (above 981px), Tablet (980px – 768px), and Phone (767px and down).
So you don’t adjust settings for each of the presets or for every custom value. Instead, you use those presets or the custom values to view LIVE how the changes to the Desktop, Tablet, and Phone look.
Media Queries
Learn more about CSS breakpoints and media queries in our tutorial:Â How To Add CSS Media Queries To Divi
Can I change the font size for each preset?
For example, there are three preview preset sizes for the Tablet breakpoint: 980px, 850px, and 768px. If I change the font size to 16px for 980px, 15px for 850px, and 14px for 768px, will those save for each size?
No, and to be honest that’s usually unnecessary. The preset sizes mentioned are preview size presets, not breakpoints. As mentioned before, use the presets and custom value to test and fine tune the font size you end up choosing for each breakpoint.
Does it work with the Extra theme?
Yes, we do have support for the Extra Theme by Elegant Themes. Here is a screenshot of the Theme Options settings.
Can I override your column stacking margin settings?
Actually yes, even though our plugin needs to use !important to override Divi, you can also modify this further with the following trick.
You first need to assign an ID to the row where they want to override the margins or CSS of Divi Responsive Helper and then use the ID selector to override the CSS.
- Add an ID such as “pac-drh-right-margin-fix” to the Row settings>Advanced tab>Custom CSS & IDs toggle>ID input field
- Add the following CSS snippet to your Divi Theme Options or child theme:
#pac-drh-right-margin-fix {
margin-right: 0!important;
}
And of course you can customize that value to whatever you want. This demonstrates how the process works by assigning an ID to overide the specificity of the targeting on the column.
We continually update this page as we receive new questions and notice frequent or common ones. If you have a question, please send us an email.