Flip Box Looks Wrong on Mobile: Troubleshooting

Flip boxes are designed to be fully responsive, but certain configurations can cause display issues on smaller screens — cards that are too large, text that overflows, or layouts that don’t stack properly. This guide covers the most common mobile display problems and how to fix them.

Issue 1: Cards Are Too Wide or Not Fitting the Screen

Cause

If you set a very wide card width (e.g., 500px) in the flip box settings, it may overflow the screen on mobile devices since phones typically have a viewport width of 375–428px.

Fix

• Reduce the Width setting in the flip box to something that fits a mobile screen, such as 300–340px.
• Alternatively, use the Custom CSS field to add a mobile-specific rule:

@media (max-width: 600px) {
  .oxi-addons-flip-boxes-body {
    width: 100% !important;
    max-width: 320px !important;
  }
}

Issue 2: Cards Are Not Stacking (All Columns Still Showing)

Cause

On some themes, the flip box cards may not automatically stack into fewer columns on mobile if there’s a CSS conflict or if the layout styles haven’t applied their responsive breakpoints correctly.

Fix

• Check your theme for any global CSS that might be overriding the flip box layout.
• Try adding custom CSS to force single-column stacking on mobile:

@media (max-width: 768px) {
  .oxi-addons-flip-box-style-1 {
    flex-direction: column !important;
    align-items: center !important;
  }
}

Replace oxi-addons-flip-box-style-1 with the actual style class for your flip box (based on its style number).

Issue 3: Text Is Overflowing or Clipping

Cause

Long titles or descriptions combined with a fixed card height can cause text to overflow or get cut off on smaller screens.

Fix

• Shorten your front title and back description text.
• Increase the card Height setting slightly to give more room for content.
• Reduce the font size for mobile via custom CSS:

@media (max-width: 600px) {
  .oxi-addons-flip-box-front-heading {
    font-size: 15px !important;
  }
  .oxi-addons-flip-box-back-info {
    font-size: 13px !important;
  }
}

Issue 4: The Flip Effect Doesn’t Trigger on Mobile

Cause

On touch devices, there is no “hover” state. The flip is triggered by a tap, not a hover. Some users may not realize they need to tap the card to flip it.

This is normal behavior

The flip effect on mobile works as designed — tapping the card flips it to show the back face. Tapping again (or tapping elsewhere on the page) flips it back. No fix is needed; this is how touch devices work.

If you want to add a visual hint for mobile users, consider adding a small “Tap to reveal” label on the front face for mobile screens.

Issue 5: Cards Look Different on iOS vs. Android

Cause

iOS Safari and Android Chrome render CSS 3D transforms differently. Some flip box styles use 3D transforms for the flip effect, which can behave differently across mobile browsers.

Fix

• Test your flip box on both iOS and Android if possible.
• If a specific style looks broken on iOS, try a different layout style that uses a simpler flip mechanism.
• Ensure your page doesn’t set overflow: hidden on a parent container, as this can clip 3D transforms in Safari.

General Mobile Testing Tips

• Use Chrome DevTools – Press F12, click the device toggle icon, and simulate different phone screen sizes to quickly spot layout issues without needing a physical device.
• Test on a real device – Browser emulation is helpful but not 100% accurate. Always test on at least one real iOS and one real Android device before publishing.
• Clear cache between tests – After making CSS changes, clear your site cache and browser cache before retesting on mobile.