If you're trying to get your Divi site looking the way you want on iPads, you might notice that it doesn't necessarily behave the way you'd expect – in particular that the iPad uses the desktop rather than tablet view. Here's why, and what to do about it.

Using Different Divi Module Settings for Desktop, Tablet and Mobile

First, just in case you haven't seen it, Divi has a responsive editing feature that allows you to configure how most settings appear on desktop, tablet, and mobile devices.

Here's how to use it:

1. Go into the Visual Builder mode.

2. Open the settings for the module you want to customize.

3. Look for the design setting that you want to adjust specifically for, e.g. tablet. When you hover your mouse over the setting, you should see a small round phone icon appear (along with some others)

4. Click this and you'll new see three tabs, corresponding to Desktop, Tablet and Mobile view.

5. Make any adjustments for the each view. All adjustments made in, for example, the tablet mode will change the setting on tablets, but not on desktop / mobile view.

How Divi's Responsive Settings Work on iPads

iPads will often use Divi's desktop mode, rather than tablet mode, styles. Divi's responsive design settings, including the tablet mode, are designed to adapt to different screen sizes, including all versions and orientations of iPads. But this is not determined by the device itself, but by the size of the viewport (i.e., the size of the device's screen).

Here are the general breakpoints Divi uses:

– Desktop: Viewport width greater than 981px

– Tablet: Viewport width between 768px and 980px

– Phone: Viewport width less than 767px

While many iPads in portrait orientation will trigger Divi's tablet styles, quite a few iPads are wide enough in landscape orientation to receive the desktop styles. Furthermore, the iPad Pro is sufficiently large to trigger Divi's desktop layout even in portrait mode.

Styling iPads Differently from Desktop Mode

Unfortunately, the breakpoints are widely used throughout Divi's CSS and not easily changed.

But if you need to target styles to the iPad specifically, it's possible to do so using CSS media queries.

Here is an attempt at targeting all iPads in landscape mode (including iPad Pro):

/* All iPads in landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1366px) 
  and (orientation: landscape) {
/* Add your ipad-specific CSS rules here */
}

Here's a general media query that should apply to most iPads in portrait mode:

/* All iPads in portrait mode */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1366px) 
  and (orientation: portrait) {
/* Add your CSS rules here */
}

These rules should cover the majority of iPads currently available, but remember to test them to ensure they work as expected for your designs.