The code snippet below demonstrates how to make a specific section or module in Divi responsive on mobile devices. This can be useful when you want to customize the appearance of a particular element on mobile screens.
function wpsnippets_divi_mobile_responsive() {
?>
<style>
@media (max-width: 767px) {
/* Add your custom CSS here */
/* For example, hide the section on mobile */
.et_pb_section {
display: none;
}
}
</style>
<?php
}
add_action( 'wp_head', 'wpsnippets_divi_mobile_responsive' );
In this code snippet, we use the wp_head action hook to add custom CSS styles within the <head> section of the HTML document. The CSS styles are wrapped within a media query that targets screens with a maximum width of 767 pixels, which typically represents mobile devices.
Inside the media query, you can add your own custom CSS rules to modify the appearance of the targeted element(s) on mobile screens. In the example provided, we hide the .et_pb_section class, but you can customize it to suit your needs.
To use this code snippet, you can add it to your theme’s functions.php file or use a custom plugin. Remember to replace .et_pb_section with the appropriate CSS selector for the element you want to make responsive on mobile.
Examples
Example 1: Adding Custom CSS for Mobile Responsiveness in Divi
This use case demonstrates how to add custom CSS code to make a specific element on your Divi website responsive for mobile devices.
function wpsnippets_add_custom_css_for_mobile_responsiveness() {
wp_enqueue_style( 'custom-mobile-css', get_stylesheet_directory_uri() . '/custom-mobile.css', array(), '1.0', 'screen and (max-width: 767px)' );
}
add_action( 'wp_enqueue_scripts', 'wpsnippets_add_custom_css_for_mobile_responsiveness' );
In this example, we’re using the wp_enqueue_style() function to enqueue a custom CSS file called custom-mobile.css only for screens with a maximum width of 767 pixels. This ensures that the custom CSS rules defined in the file will only apply to mobile devices.
Example 2: Modifying Divi’s Mobile Menu Breakpoint
This use case demonstrates how to modify the default breakpoint at which the mobile menu is displayed in Divi.
function wpsnippets_modify_divi_mobile_menu_breakpoint() {
return '800px';
}
add_filter( 'et_divi_mobile_menu_breakpoint', 'wpsnippets_modify_divi_mobile_menu_breakpoint' );
By default, Divi displays the mobile menu when the screen width is less than or equal to 980 pixels. In this example, we’re using the et_divi_mobile_menu_breakpoint filter to change the breakpoint to 800 pixels. This means the mobile menu will be displayed when the screen width is less than or equal to 800 pixels.
Example 3: Hiding Specific Elements on Mobile Devices
This use case demonstrates how to hide specific elements on mobile devices using CSS media queries in Divi.
@media only screen and (max-width: 767px) {
.hide-on-mobile {
display: none !important;
}
}
In this example, we’re using a CSS media query to target screens with a maximum width of 767 pixels. The .hide-on-mobile class is then used to hide the specified elements by setting their display property to none. This ensures that the elements will be hidden on mobile devices while remaining visible on larger screens.