Quick Fix: Better Looking Divi Site On iPad Pro

Divi Tips & Tricks | 12 comments

Get your Divi site iPad Pro ready with this simple little tip.

With the release of the iPad Pro we as designers (or do-it-yourself creators) have yet another screen resolution to deal with.

Fortunately, the Divi theme is already pretty great at accounting for many of the most common screen sizes but it seems that the team over at Elegant Themes haven’t quite gotten around to updating Divi for the iPad Pro.

But fear not! This quick fix should straighten your Divi site right up and make it look as good on the iPad Pro as it does on other screen sizes.

The Problem

The main issue when it comes to Divi and the iPad Pro is the main menu: it simply doesn’t collapse when it should do and you end up with some weird overlap. It looks something like this:

The Solution

What we need to do is to tell our theme that when the browser detects an iPad Pro screen resolution it should display the mobile menu.

/* iPad Pro Menu Fix */
@media only screen and ( max-width: 1040px ) {
#et_mobile_nav_menu {
display: block;
#top-menu-nav, #top-menu {
display: none;

The Result

The end result should look something like this:

Much better!

Have you noticed anything else wrong with the Divi theme on the iPad Pro? Let me know in the comments and I may be able to help.


    • Brett Worth

      Hi Sandeep! Sorry I must have missed your comment. Did you resolve this? If not feel free to leave your URL and I’ll take a quick look for you.

  1. Bto

    Hi, nice snippet,i’m having some issues with my woocommerce Product on my Divi themes it is not responsive on my IPad in portrait mode.
    Can you check it out my web:



    • Brett Worth

      Hi there! I can’t seem to get your URL to work, getting the following error – ‘This site can’t be reached
      econaturaden.com’s server IP address could not be found.

  2. Karan Sethi

    Hi I am facing the same issue with Ipad pro menu bar and footer also.. could you please check it for me too and me help out… URL – test-partnermodel.com

    • Brett Worth

      Hi Karan, which iPad Pro is it and at what resolution are you having trouble with? It looks like you’re using several different modules in the menu some other changes to make it work.

        • Karan Sethi

          Hi Sir, could you pleae check the screenshot and help me in getting the task done

          • Brett Worth

            Hi Karan, it looks like there are a few different things happening here. For example:
            1. What are the icons for in the header? Do they need to be that big on tablet?
            2. The header icons are missing from mobile, is that intentional? How I would do this would be to add the logos to the menu and make the menu module full width.
            2. The issue with the footer appears to be margin/spacing related. Divi should manage this automatically unless you’ve set specific values. If it doesn’t then you’d most likely want to create CSS ID’s for each column or module and then add specific code for iPad Pro resolutions. The fact that the content is as far to the left as it can be though tells me that the spacing is not correct though.

            I’m afraid that the site will require a bit of tweaking and design to get it looking correct.

  3. Katrin Dubois

    Hi, I tried but it doesn’t work on my site. Is it possible to send you the url?

    • Константин Петренко

      You could have a different CSS classes for your menu. I had the same.

  4. Константин Петренко

    Thanks a lot. Changed my classes a bit, and it works )


Submit a Comment

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

Let's make something great together.