Preview Size Overview
Why Do We Need This
Divi comes with only one main Custom CSS input area in Divi>Theme Options>General tab. However, CSS that you write or paste there will affect any device or screen size on your site. But what if you want to only change something on Tablet, or just on Phone, or both? You would need to specifically write your own custom CSS media queries, and this can be difficult and intimidating, especially for beginners. This is where Divi Responsive Helper plugin comes to the rescue!
What This Feature Does
Our plugin provides you with several new custom CSS input boxes that correspond to all the built-in Divi breakpoint sizes, as well as new totally customizable code boxes as well. There are currently 10 new input areas for adding or writing custom CSS that affects desktop only, tablet only, phone only, desktop and tablet, tablet and phone, or whichever size you choose!
How To Use The Predefined CSS Media Queries Settings
To begin using the custom predefined CSS media queries, simply go to the Divi>Theme Options. There you will see a new tab that our plugin adds called “Divi Responsive Helper.” Once you click on that, you will see more tabs. Click on the “CSS Media Queries” tab to begin adding your own CSS code.
There is no need to create any media queries. Simply write or paste the normal CSS code into one of the boxes, and that code will affect the screen size mention. You can click on the (?) help text on the right side of any setting in Theme Options to learn more about the exact screen sizes each input field is affecting.
- Custom CSS For Desktop Only (devices 981px and up)
- Custom CSS For Tablet Only (devices 767px – 980px)
- Custom CSS For Phone Only (devices 0px – 767px)
- Custom CSS For Desktop And Tablet Only (devices 769px and up)
- Custom CSS for Tablet And Phone Only (devices 0px – 980px)
How To Use The Customizable CSS Media Queries Settings
Below the previously mentioned CSS boxes, we now have new configurable CSS media query boxes, which enable you to create your own media queries! Simply enter a min-width and max-width value into the settings, and write or paste any CSS code into the box. Any code in the box will apply on your website between those custom sizes! No need to mess around with writing your own media queries anymore!
To begin using the customizable CSS Media Queries, simply go to the Divi>Theme Options. There you will see a new tab that our plugin adds called “Divi Responsive Helper.” Once you click on that, you will see more tabs. Click on the “CSS Media Queries” tab to begin configuring your own CSS media query sizes. The plugin currently offers 5 customizable media query boxes.
Once you add the min and max width values, go ahead and add your CSS to the boxes. Remember, there is no need to wrap the code in a media query, the plugin does that for you!