Beaver Builder allows designers to set custom Beaver Builder Custom Breakpoints for different device sizes. These breakpoints control when the layout switches between desktop, tablet, and mobile views. Setting custom breakpoints should give designers precise control over responsive behavior. But sometimes the custom breakpoints work in the editor but do not apply to the live frontend website. The layout uses the default breakpoints instead of the custom values that were carefully configured.
Why Beaver Builder custom breakpoints fail on the frontend
- Beaver Builder generates CSS files based on the breakpoint settings at the time of CSS generation.
- If breakpoints are changed after the CSS files were generated, the old CSS may still be served.
- The WordPress theme may also have its own breakpoints that override Beaver Builder’s breakpoints.
- Theme CSS loads after Beaver Builder CSS and can override responsive styles completely.
- Caching plugins may serve old CSS files that were generated before the breakpoint changes.
How CSS generation affects custom breakpoint application
Beaver Builder generates static CSS files to improve website loading performance significantly. These CSS files contain media queries based on the breakpoint settings at generation time. Changing breakpoints without regenerating CSS leaves old media queries in the static files. The frontend continues using the old CSS until the files get regenerated with new breakpoint values. Regenerating Beaver Builder CSS forces the plugin to rebuild all style files from scratch.
Step by step guide to fixing Beaver Builder custom breakpoints
Follow these steps to ensure custom breakpoints apply correctly to the Beaver Builder frontend.
- Navigate to Beaver Builder → Settings → Advanced and locate the responsive breakpoint settings
- Set the custom breakpoint values to the desired pixel widths for each device type
- Save the Beaver Builder settings after entering the custom breakpoint values
- Go to Beaver Builder → Tools → Cache and click the “Clear Cache” button
- Navigate to Beaver Builder → Tools → Export/Import and regenerate CSS files if available
- Clear all other caches including plugin cache, CDN cache, and browser cache completely
- Check if the theme has its own responsive breakpoint settings that may conflict
- Adjust theme breakpoints to match Beaver Builder breakpoints for consistency
- Add custom CSS to override theme breakpoints if adjustment is not possible
- Test the website on different devices to verify breakpoints work correctly
How to override theme breakpoints with custom CSS
Add this code to the WordPress Customizer or Beaver Builder custom CSS section for the website.
@media (max-width: 767px) { /* Your custom mobile styles */ }
Replace 767 with the desired custom breakpoint value for mobile devices on the website.
Place this CSS after the theme’s CSS to ensure it takes precedence over theme styles.
Using !important flags may be necessary if the theme styles are particularly aggressive.
Beaver Builder breakpoint troubleshooting reference table
Here is a reference table for diagnosing custom breakpoint problems in Beaver Builder.
| Symptom | Most likely cause | Recommended solution |
|---|---|---|
| Breakpoints work in editor but not on frontend | Old CSS files still being served to visitors | Clear Beaver Builder cache and regenerate CSS files |
| Breakpoints do nothing on any device | Theme CSS overrides Beaver Builder responsive styles | Add custom CSS with higher specificity or important flags |
| Breakpoints apply to some pages but not others | Inconsistent CSS generation or page-specific styles | Check each page for custom CSS or specific breakpoint overrides |
| Tablet breakpoint works but mobile does not | Theme has different breakpoint hierarchy | Check theme documentation for exact breakpoint values |
| Breakpoints reset to default after update | Plugin update overwrote custom breakpoint settings | Document custom breakpoints and re-apply after updates |
For more information about Beaver Builder responsive design, visit the Beaver Builder page on wpwizzy.com.
Preventing Beaver Builder breakpoint problems in the future
- Document custom breakpoint values for quick restoration after plugin or theme updates.
- Test breakpoint changes on staging websites before applying them to the live production site.
- Clear Beaver Builder cache and regenerate CSS after every breakpoint change made to the site.
- Choose themes that use standard responsive breakpoints compatible with Beaver Builder defaults.
- Keep Beaver Builder and the WordPress theme updated to their latest versions regularly.
- Use browser developer tools to verify which breakpoints are actually applied to the website.