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:
- 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.
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.
0 Comments