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 of the built in Divi breakpoint sizes. There are currently five new input areas for adding or writing custom CSS that affects desktop only, tablet only, phone only, desktop and tablet, and tablet and phone.
How To Use The Custom CSS Media Queries Settings
To begin using the custom preview size settings, 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)
