Add ability to zoom on mobile devices and tablets
If you find this tweak helpful:
Tweaking Elegant Themes involves creating a child theme and editing PHP and CSS files within a text editor. If you have never done this you may want to read our guide on creating a child theme. All tweaks are written with the assumption that you have a default installation of your theme. Any tweaks or changes you may have previously made to your theme could affect the outcome of the tweaks on this site. All tweaks should be tested before applying to a live site.
Divi requires no special coding to make it look great on mobile devices. Everything created within the Page Builder is automatically mobile responsive. One of the few downsides is that it does not allow users to zoom in on text or images on mobile devices. This quick tweak easily fixes that problem.
Locate the functions.php file in the /themes/Divi/ folder
Find the following code around line 160:
echo '<meta name=
"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0
Change it to this:
echo '<meta name=
"width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=1
The maximum-scale=2.0 part of this code allows the user to zoom in 2x. You can change this to a higher number if you want your users to be able to zoom in more. The user-scalable=1 part of this code is what allows users to zoom. Zero stands for false and 1 stands for true.
You'll notice I edited this code directly in the parent theme's functions.php file instead of using a child theme. This means if you ever decide to update Divi, you'll likely have to go back and make this change again as the update will probably overwrite the functions.php file. There are ways around this but they are not worth the effort. The best thing to do would be to create a .txt file with any changes you make to the functions.php file for reference and store it in the child theme folder or simply put comments at the top or bottom of the child theme's style.css file.