Why Mobile Matters
Over 60% of web traffic is mobile. If your pricing table doesn't work on phones, you're losing more than half your potential customers.
💡 Mobile Stats: Mobile users are 5x more likely to bounce if a page isn't mobile-friendly. Google also prioritizes mobile-friendly sites in search rankings.
Automatic Responsive Features
WP Pricing Tables is mobile-responsive by default:
- Flexible columns: Automatically stack on small screens
- Touch-friendly buttons: Minimum 44x44px tap targets
- Readable text: Minimum 14px font size
- Optimized spacing: Adequate padding for fingers
Mobile Display Modes
Stacked Layout (Default)
Columns stack vertically on screens under 768px:
- ✅ Easy to scroll
- ✅ Full-width columns (readable)
- ✅ Natural top-to-bottom flow
- ❌ Harder to compare side-by-side
Horizontal Scroll
Columns remain side-by-side, scroll horizontally:
- ✅ Easy comparison
- ✅ Maintains desktop layout
- ❌ Requires swiping
- ❌ Not all columns visible at once
Slider/Carousel
Swipe between pricing tiers:
- ✅ Modern, app-like feel
- ✅ One tier at a time (focused)
- ✅ Touch gestures
- ❌ No side-by-side comparison
Configuring Mobile Settings
1 Access Mobile Settings
In table builder, find Mobile/Responsive tab.
2 Choose Display Mode
Select: Stacked, Horizontal Scroll, or Slider.
3 Set Breakpoint
Default: 768px (tablets and phones stack)
Custom: Set your own breakpoint if needed
4 Mobile-Specific Styling
- Font sizes: Adjust for readability
- Button size: Ensure tap-friendliness (min 44px height)
- Spacing: Reduce to fit content
Testing Mobile Display
Built-in Preview
Use the mobile preview toggle in the builder to see exactly how your table appears on phones.
Real Device Testing
- Publish your table
- Open on actual phone/tablet
- Test all interactions (taps, scrolls, toggles)
- Check readability in sunlight
Browser DevTools
- Open page in Chrome/Firefox
- Press F12 for DevTools
- Click device toggle icon
- Test various screen sizes
Mobile Optimization Tips
Content Strategy
- Prioritize features: Put most important at top
- Reduce text: Mobile users scan, not read
- Clear CTAs: Make buttons obvious and large
Performance
- Lazy load: Enable lazy loading for faster initial render
- Optimize images: Use compressed images in badges/icons
- Minimize CSS: Remove unused styles
Touch Interactions
- Tap targets: Minimum 44x44px (Apple recommendation)
- Spacing: 8px+ between tappable elements
- Hover states: Remove or convert to tap states
✅ Best Practice: Test your pricing table on at least 3 devices: iPhone, Android phone, and iPad/tablet. Each renders slightly differently.
