Overview

Divi’s default responsive breakpoints—981px for Tablet and 776px for Phone—serve as a solid starting point, but they might not suit all devices or design needs. With the Divi Responsive Helper, you can easily customize these breakpoints to create a more tailored responsive experience.

This powerful feature allows you to:

• Adjust the Desktop/Tablet breakpoint (981px) to a value like 1024px for better compatibility with larger tablets like iPads.
• Modify the Tablet/Phone breakpoint (776px) to a size that works best for smaller devices, such as reducing it to 420px.

These changes apply across your entire site, affecting every module and layout to ensure consistent responsiveness.

Why Customize Divi’s Breakpoints?

Customizing responsive breakpoints gives you greater control over how your designs adapt to various devices. For example:

• Larger tablets like iPads benefit from increasing the Desktop/Tablet breakpoint to 1024px.
• Smaller phones can display better layouts when the Tablet/Phone breakpoint is adjusted, such as reducing it to 420px.

Modern devices vary widely in size, and setting custom breakpoints ensures your website looks great on every screen.

How to Use Custom Breakpoints

Accessing the Settings

1. Go to Divi > Theme Options in your WordPress Dashboard.
2. Open the new Divi Responsive Helper tab added by the plugin.
3. Navigate to the Custom Breakpoints section.

Main Breakpoints

• Tablet to Desktop Breakpoint (Default: 981px)
  Use the input field to set a custom value, such as 1024px for iPads.
• Tablet to Phone Breakpoint (Default: 776px)
  Adjust this value to fit your needs, such as setting it to 420px for smaller smartphones.

Secondary Breakpoints

In addition to the main breakpoints, you can adjust one of Divi’s secondary breakpoints:

• 480px Breakpoint: This affects specific modules like the Gallery module and other elements controlled by design settings.

Divi also has other secondary breakpoints that generally function well with their defaults, but the 480px breakpoint offers an additional layer of customization if needed.