WPBakery includes responsive design features that allow designers to hide or show elements on different devices and adjust column layouts for mobile screens. When configured correctly, the website should adapt seamlessly from desktop to tablet to mobile, providing an optimal experience on every device. However, sometimes the responsive settings work perfectly in the WPBakery editor preview but have absolutely no effect on the live frontend, leaving mobile users with a desktop layout that is impossible to navigate or read.
This problem can be particularly damaging because mobile devices account for more than half of all web traffic for most websites today. When responsive settings fail, mobile visitors may see tiny text that requires zooming to read, overlapping columns that hide important content, or buttons that are too small to tap with a finger. Understanding why WPBakery responsive settings fail on the frontend is essential for creating mobile-friendly websites.
The most common cause of this problem is a missing or incorrectly configured viewport meta tag in the website’s HTML head section. The viewport meta tag tells mobile browsers how to scale and render the page, and without it, browsers may ignore responsive CSS rules entirely. Another common cause is that caching plugins are serving old CSS files that were generated before responsive settings were configured, or the active WordPress theme has CSS rules that override WPBakery’s responsive styles with higher specificity.
Why WPBakery responsive settings fail on the frontend
WPBakery generates separate CSS rules for each responsive breakpoint using CSS media queries. These media queries check the screen width and apply different styles depending on whether the user is on a desktop, tablet, or mobile device. If the viewport meta tag is missing from the HTML head, mobile browsers will not know how to interpret these media queries, and they may apply desktop styles to all devices regardless of screen size. The viewport meta tag should look like this: <meta name="viewport" content="width=device-width, initial-scale=1.0">.
Caching plugins can also cause responsive settings to fail by serving old CSS files that were generated before responsive settings were configured. When responsive settings are changed, WPBakery regenerates CSS files with new media query rules. However, if a caching plugin serves an older version of these CSS files, the frontend will continue using the old rules, and responsive changes will not appear for visitors. Clearing all caches after making responsive changes is essential for ensuring they take effect immediately.
The active WordPress theme may also interfere with WPBakery’s responsive settings. Some themes have their own responsive CSS that conflicts with WPBakery’s media queries, especially if the theme uses very specific selectors with !important flags. Switching to a default WordPress theme temporarily can help identify whether the theme is causing the responsive problem. Additionally, custom CSS added to the theme or through other plugins may override WPBakery’s responsive styles without providing any warning that a conflict exists.
How to check if the viewport meta tag is present on the website
Open the frontend of the website in a web browser and right-click anywhere on the page, then select “View Page Source” from the context menu. In the HTML source code, look for the line that contains <meta name="viewport" within the
Step by step guide to fixing WPBakery responsive settings
Follow these steps in order to restore proper responsive behavior in WPBakery. Start with the simplest solutions before moving to more advanced troubleshooting steps.
- Verify that the viewport meta tag exists in the HTML head section of the website
- If missing, add the viewport meta tag through the theme’s header.php file or using a plugin
- Regenerate WPBakery CSS from the WPBakery settings panel if available
- Clear all caches including plugin cache, CDN cache, browser cache, and server cache completely
- Test responsive behavior on actual mobile devices instead of relying on browser simulation tools
- Check that responsive column settings are explicitly configured for mobile devices (not just inherited)
- Disable all caching plugins temporarily to test if they interfere with responsive CSS
- Switch to a default WordPress theme to test if the current theme overrides responsive styles
- Add custom CSS to override theme breakpoints if adjustment is not possible through settings
- Update WPBakery to the latest version available from the official website
How to add the viewport meta tag to a WordPress website
If the viewport meta tag is missing, add it to the theme’s header.php file between the
and tags. Locate the header.php file in the theme directory (Appearance → Theme Editor), find the opening tag, and add the following code right after it:<meta name="viewport" content="width=device-width, initial-scale=1.0">. If you are using a child theme, add the code to the child theme’s header.php file to prevent it from being overwritten during theme updates. Alternatively, use a plugin like Insert Headers and Footers to add the meta tag without editing theme files.
WPBakery responsive settings troubleshooting reference table
Here is a reference table for diagnosing responsive problems in WPBakery based on specific symptoms you might encounter.
| Symptom | Most likely cause | Recommended solution | Responsive settings work in editor but not on frontend | Missing viewport meta tag or cached CSS | Add viewport tag and clear all caches |
|---|---|---|
| Columns do not stack on mobile devices | Responsive column settings not configured | Set mobile column widths to 100% explicitly | Hidden elements still visible on mobile | Responsive visibility settings not saved | Reconfigure hide on mobile settings and save | Responsive styles apply at wrong screen widths | Theme breakpoints differ from WPBakery defaults | Adjust theme breakpoints or add custom CSS media queries |