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:

function et_add_viewport_meta(){
echo '<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />';

Change it to this:

function et_add_viewport_meta(){
echo '<meta name="viewport" content="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.



  1. Worked out how to put this in a child functions.php

    Thought I would share!

    // Removes et_add_viewport_meta from the wp_head phase
    function remove_divi_actions() {
    remove_action( ‘wp_head’, ‘et_add_viewport_meta’ );

    // Call ‘remove_divi_actions’ during WP initialization

    function et_add_viewport_meta_2(){
    echo ”;
    add_action( ‘wp_head’, ‘et_add_viewport_meta_2’ );

    Hope that is useful.

    John Dray

    November 14, 2015

    • Thanks for taking the time to share John! Very helpful

      Brad (admin)

      November 24, 2015

    • Forgive my ignorance, but would love to take advantage of your suggestion, but do not understand where I place or replace the code you suggest in my child theme’s functions.php file:

      David Andora

      January 13, 2016

      • Even though its a bit late, i’ll post that for users that stumble upon this now.

        If you want to make changes to some PHP files, its better to create, or download a child theme. Personaly i use a child theme from Monterey Premier. Its free and easy to install/use.

        The reasons you need a child theme are a lot. The main reason though is that if you don’t use a child theme and you have some of your code in divi themes main php files then your code will be replaced on the next divi update with the default one. If you use a child theme though it will persist.

        So , since you have your child theme setup, copy the php files that you want to edit from divi directory to your divi child theme directory, then edit them and add or remove the desired code, save and you are good to go.


        January 25, 2017

    • John,

      Could you please elaborate as to what needs to be after the Echo? I got confused, since you have a ”; after echo, and the article has the ‘ after echo.

      Is it Echo”; ”;

      Or is it Echo ”;

      Thanks for the help!!! 🙂


      January 2, 2018

    • Warning: the above code is buggy and will break your functions.php. Please can the OP check the code?


      March 17, 2021

      • Hello. It did break my site and I don’t know how to fix it. Anyone can help please ? I’m getting a critical error now. THANKS !


        January 16, 2023

        • …try replacing ‘ (apostrophe) with single quotation marks (double quotation marks should work as well… but you need to replace it completely everywhere in the code.


          June 5, 2023

  2. The bit after ‘ECHO’ should be as in your article, but your blog stripped it out.

    John Dray

    November 14, 2015

  3. thank you!

    Jennifer Klar

    January 5, 2016

  4. It works great! Thanks a lot

    Maria Luisa Fonseca

    October 12, 2016

    • Ruud thanks a lot!
      Plugin helps me 😉


      June 11, 2020

  5. Great article! Had this issue and your article helped me fix it! Thanks so much!


    December 3, 2017

  6. Excellent, keep it up


    July 29, 2018

  7. Wow.. I was just finding some tweam to do this for many days. Thanks alot for solving this issue.

    Farukh Hussain

    August 28, 2018

  8. Hi,

    I tried pasting in my child functions.php
    “// Removes et_add_viewport_meta from the wp_head phase
    function remove_divi_actions() {
    remove_action( ‘wp_head’, ‘et_add_viewport_meta’ );

    // Call ‘remove_divi_actions’ during WP initialization

    function et_add_viewport_meta_4(){
    echo ”;
    add_action( ‘wp_head’, ‘et_add_viewport_meta_4’ );”

    Also tried with meta_2

    Doesn’t seem to help.Does it take time or did I do anything wrong.Please help.Thanks


    June 27, 2019

  9. If you have used the above code from John Dray, and find it does not work, then the problem may be due to the type of apostrophe used by your editor when updating the child theme functions.php file. Change the curly apostrophe to a straight apostrophe and it should then work ok.

    Peter Young

    January 27, 2022

  10. <?php

    // Removes et_add_viewport_meta from the wp_head phase
    function remove_divi_actions() {
    remove_action( 'wp_head', 'et_add_viewport_meta' );
    // Call 'remove_divi_actions' during WP initialization

    // add ability to pinch and zoom
    function et_new_viewport_meta(){
    echo '’;
    add_action( ‘wp_head’, ‘et_new_viewport_meta’, 15 );


    November 8, 2022

  11. Hello. I tried this code in my functions child theme and it broke my site and I don’t know how to fix it. I’m getting a critical error now on wordpress with no idea on how to fixe this. I tried reuploading the previous functions.php through ftp, but didn’t change a thing. PLEASE HELP THANKS !


    January 16, 2023

  12. thank you for the help. this worked great for me!


    February 11, 2023

  13. divi disables one of important setting against other web sites and themes. well done, divi.


    July 15, 2023

  14. Surprisingly, the recommendation of the WCAG guidelines is not met by ElegantThemes here. I wonder why this is so.
    Nonetheless, thank you very much for the workaround. The ability to implement the settings for user-scalable directly in the child theme saves valuable time after updates. Thumbs up for that and thanks for sharing!

    Rolf DF

    March 13, 2024


  1. Add Zoom On Mobile Devices And Tablets – MV - […] * […]

Post a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Share This