We all know about the nice feature of enabling or disabling a particular module with respect to the screen size the page is being viewed. It’s a nice and handy feature introduced in Divi to ease out the complexity of writing CSS media breakpoints to achieve the functionality.
Two break points assigned to Divi modules are at 767 px & 980 px. Right click the hamburger symbol on the left panel of any module and select Disable option. You will get three symbols representing mobile, tablet & desktop screen. All three symbols are in blue color indicating that the module is view-able in all screen size (Image 1). If you want to hide the particular module in any screen size, just click on the specific symbol and the symbol will turn red indicating that particular module will be disabled in that specific screen size.
This method is super easy and works well for the pages with small number of modules, but page load time increases with the increment of modules in a page. Though the modules are hidden in certain screen sizes, but all the modules get loaded at the time of page access.
Let us consider a situation, that a page has a full screen slider at the top, which we do not want to be displayed in mobile & tablet screen. In stead, we need a full screen single image to be displayed in tablet screen and no slider or image in mobile screen. We need to create two full screen modules in a full width section to achieve this (Image 2). We have created a full width section with two modules in it. One full width slider module for desktop screen (screen width greater than 980 px) and another full width image module for mobile screen (screen width within 768 px and 980 px) (Image 3 & Image 4).
Save the page & check it for different screen sizes and you will find that the outcome is as expected – slider is displayed in desktop, single image is displayed in tablet & none of them is available in mobile. Though the full width module in the page is not available in the mobile screen size, all the modules are loaded in the background.
If there are small number of modules to be hidden / displayed by this method, page loading time may not differ much in different screen sizes but when the number of modules increases in a page, loading time will differ considerably. So, for a complex page design with higher number of modules, it is preferable to resort back to CSS.
For the same effect, we can define two media break points as following:
@media only screen and (max-width: 767px) {
/* CSS for Mobile Screen, below 768 px */
}
@media only screen and (min-width: 768px) and (max-width: 980px) {
/* CSS for Tablet Screen, within 768 px and 980 px */
}
Similarly, if more breakpoints are needed for different screen sizes, they can be defined this way. You may find a list of different breakpoints here – CSS Media Queries for the Divi Theme. For a list of different screen sizes – List of Tablet and Smartphone Resolutions and Screen Sizes.
Reference Images:
External Reference:
CSS Media Queries for the Divi Theme
List of Tablet and Smartphone Resolutions and Screen Sizes
