Divi’s responsive breakpoints—981px for Tablet and 776px for Phone—are great defaults, but they may not always align with your design needs. What if you could adjust these breakpoints to better fit modern devices, like setting the Tablet breakpoint to 1024px for iPads? That’s exactly what the Divi Responsive Helper plugin allows you to do.
In this tutorial, I will show you how to use the Custom Breakpoints feature in Divi Responsive Helper to take control of your responsive design.
Learn More About Divi Responsive Helper!
Make your website look great on all devices with over 50 features in the ultimate Divi responsive toolkit!
▶️ Please watch the video above to get all the exciting details! 👆
Why Customize Divi’s Breakpoints?
The default breakpoints work for many situations but can feel limiting in today’s diverse device landscape. For example:
- Large tablets like iPads often benefit from a larger breakpoint (e.g., 1024px).
- Customizing the Tablet-to-Phone breakpoint ensures better optimization for smaller devices.
By adjusting these breakpoints, you can fine-tune your layouts for specific devices, ensuring a seamless user experience across screens.
1: Install and Activate Divi Responsive Helper
If you haven’t already, download and install the Divi Responsive Helper plugin from Pee-Aye Creative. Once activated, you’ll see the plugin settings available in your WordPress Dashboard under Divi > Responsive Helper.
2: Adjust the Custom Breakpoints Settings
Navigate to Divi > Responsive Helper > Breakpoints. Here, you’ll find input fields for the two key breakpoints.
Main Breakpoints
- Tablet to Desktop Breakpoint (Default: 981px)
- Tablet to Phone Breakpoint (Default: 776px)
In the input field for Tablet to Desktop, enter your desired value. For example, you may want to enter 1024px for better compatibility with iPads.
For Tablet to Phone, adjust the value as needed. This could be something in the 420px range, as most smartphones are around that size.
Secondary Breakpoints
We also added another setting for one of Divi’s secondary breakpoints, which only affect specific modules and are controlled by design settings. Here, you can adjust the default 480px breakpoint, which affects things like the Gallery module and other elements.
Be sure to save your changes!
3: Test the New Breakpoints
Once the breakpoints are adjusted, open your site and adjust the browser size to various widths to confirm that the new breakpoints are being applied. The changes are applied site-wide, meaning that every module and layout in Divi will automatically adhere to the updated breakpoints.
It’s important to note that there are actually a few additional secondary breakpoints in Divi, apart from the main ones for Desktop, Tablet, and Phone. These secondary breakpoints affect specific modules, and they typically function well with their default settings.
Hi Nelson,
I just set the Custom breakpoint to 1024 on a page, but it seems it does not affect things like background gradient and position.
I got a hero with two columns on desktop an 50% gradient on the right, and in my two-column-row an image with position:relative/50%.
On Tablet view (980), the gradient is removed and the columns are stacked, position 0%. But not on 1024 px screen (although all other modules below show tablet view.)
How can I solve this?
Hi Heike!
I need to check if the code is not getting overridden by another code. Can you please share the URL of the page to check further?