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.