Breakdance Builder includes a sophisticated popup system that allows designers to display forms, offers, announcements, and other content in modal windows. Setting up a popup with a button trigger takes only a few minutes using the Breakdance Builder interface, and the popup can be configured to appear on click, hover, or after a delay. However, a common frustration among Breakdance users is that popups work correctly on desktop computers but do absolutely nothing when triggered from mobile phones or tablets.
This problem is particularly damaging because mobile devices account for more than half of all web traffic for most websites. Visitors who access the website from their phones see no response when they tap the trigger button, leading them to believe the button is broken or the website is malfunctioning. The result is missed conversions, frustrated users, and a poor overall experience that drives potential customers away. Understanding why popup triggers fail on mobile is essential for anyone using Breakdance Builder for lead generation.
The most common cause of this problem is that the popup trigger is set to “Hover” instead of “Click.” Hover events do not exist on touch screens because there is no mouse cursor to hover with. When a mobile user taps an element that expects a hover event, nothing happens because the browser does not know how to translate a tap into a hover. Another cause is that the popup display conditions may exclude mobile devices, or another element may be overlapping the trigger button and intercepting the tap event.
Why Breakdance Builder popup triggers fail on mobile devices
Breakdance Builder uses click events to detect when a trigger button gets pressed by the user. On desktop computers, both click and hover events work reliably, but on mobile devices, only click events work as expected. Hover events do not exist on touch screens because there is no concept of hovering without a mouse cursor. When a popup trigger is configured to use “Hover” instead of “Click,” mobile users will see no response when tapping the button because the browser never receives a hover event to act upon.
Even when the trigger is set to “Click,” mobile browsers handle click events differently than desktop browsers. A 300-millisecond delay exists on some mobile browsers between the tap and the click event firing, which can cause problems with certain JavaScript implementations. Additionally, if another element has a higher z-index and overlaps the trigger button on mobile, the tap never reaches the button at all because it is intercepted by the overlapping element. This is especially common with sticky headers or floating elements that cover parts of the page.
The popup display conditions may also exclude mobile devices unintentionally. Breakdance Builder allows designers to show popups only on specific device types, which is useful for creating mobile-specific popups. However, if the display conditions are misconfigured and mobile devices are disabled, the popup will never open on phones or tablets. Checking the display conditions is a quick way to rule out this possibility before diving into more complex troubleshooting.
How to check if a popup trigger is configured for click or hover
Edit the page containing the popup in Breakdance Builder and select the trigger element (usually a button or link). Navigate to the popup settings panel and look for the trigger type option. This setting determines whether the popup opens on click, hover, or after a delay. Ensure that “Click” is selected for mobile compatibility, as “Hover” will not work on touch screens. If the trigger type is set to “Click” and popups still do not work on mobile, proceed to check for overlapping elements or JavaScript conflicts.
Step by step guide to fixing Breakdance Builder mobile popup triggers
Follow these steps in order to ensure popup triggers work correctly on all mobile devices. Start with the simplest solutions before moving to more advanced troubleshooting steps.
- Check that the popup trigger type is set to “Click” instead of “Hover” in the popup settings
- Verify that mobile devices are enabled in the popup display conditions (not excluded)
- Check that no other element has a higher z-index and overlaps the trigger button on mobile
- Increase the click delay setting to 300 milliseconds for better mobile browser compatibility
- Disable JavaScript defer or delay features for Breakdance Builder scripts in caching plugins
- Clear all caches including plugin cache, CDN cache, and browser cache completely
- Test the popup on real mobile devices instead of relying on browser simulation tools
- Use browser developer tools to inspect the trigger button for overlapping elements
- Add custom CSS to increase the touch target size for better mobile usability
- Update Breakdance Builder to the latest version available from the official website
How to add custom CSS to improve mobile touch targets for popup triggers
Add this CSS to Breakdance Builder global settings or theme customizer for better mobile touch targets. This CSS ensures that popup trigger buttons meet accessibility standards for touch devices and prevents other elements from overlapping them. Adjust the padding values as needed based on the specific button design and surrounding elements.
.breakdance-popup-trigger {
cursor: pointer;
display: inline-block;
min-height: 44px;
min-width: 44px;
position: relative;
z-index: 100;
}
@media (max-width: 768px) {
.breakdance-popup-trigger {
padding: 12px;
}
}
Breakdance Builder mobile popup troubleshooting reference table
Here is a reference table for diagnosing popup trigger problems on mobile devices in Breakdance Builder.
| Symptom | Most likely cause | Recommended solution | Popup works on desktop but not on mobile | Trigger type set to Hover instead of Click | Change trigger type to Click in popup settings | Popup opens but is positioned incorrectly | Popup width too wide for mobile screen | Set popup width to 90% for mobile devices | Popup opens but closes immediately | Touch event conflict or double-firing | Adjust click delay and prevent event bubbling | Popup trigger does nothing when tapped | JavaScript delayed or deferred on mobile | Exclude Breakdance Builder scripts from defer/delay |
|---|
For more information about Breakdance Builder popups, visit the Breakdance Builder page on wpwizzy.com.
Preventing Breakdance Builder mobile popup problems in the future
Always test popups on real mobile devices during the design process before publishing them live, as browser simulation tools can miss touch-specific issues. Use click triggers instead of hover triggers for any popup that should work on mobile phones, because hover events simply do not exist on touch screens. Set popup dimensions using percentages or viewport units instead of fixed pixel values to ensure they adapt to different screen sizes.
Keep popup content minimal on mobile devices to improve loading speed and usability, and test popup triggers with various JavaScript optimization settings enabled and disabled. Regularly review mobile analytics to catch popup problems before visitors report them, and consider using a dedicated mobile popup plugin if Breakdance Builder popups continue to cause reliability issues on phones. Document any custom CSS added for mobile popup compatibility for future reference.