Responsive Design
Responsive design ensures your popup looks great on every device. XBuilder provides comprehensive tools for creating device-specific experiences.
Device Preview
Preview Modes
| Device | Width | Description |
|---|---|---|
| Desktop | Full | Default view |
| Tablet | 768px | iPad-sized |
| Mobile | 375px | Phone-sized |
Accessing Preview
Use header buttons to switch devices:
- Click device icon
- Toggle orientation (tablet/mobile)
- See live changes
Breakpoints
XBuilder Breakpoints
| Breakpoint | Width | Devices |
|---|---|---|
| Desktop | 1024px+ | Laptops, desktops |
| Tablet | 768-1023px | iPad, tablets |
| Mobile | 0-767px | Phones |
How Values Cascade
Desktop value ← default
↓ (unless overridden)
Tablet value
↓ (unless overridden)
Mobile value
If no tablet/mobile value set, desktop value is used.
Setting Responsive Values
Device-Specific Settings
Many settings support per-device values:
- Find the setting you want to adjust
- Look for device toggle icons
- Select target device
- Set value for that device
Example: Font Size
Desktop: 18px
Tablet: 16px
Mobile: 15px
Example: Width
Desktop: 500px
Tablet: 90%
Mobile: 100%
Commonly Responsive Settings
Layout
| Setting | Desktop | Tablet | Mobile |
|---|---|---|---|
| Width | 500px | 90% | 100% |
| Padding | 40px | 32px | 24px |
| Position | Center | Center | Bottom |
Typography
| Setting | Desktop | Tablet | Mobile |
|---|---|---|---|
| H1 Size | 36px | 32px | 28px |
| Body Size | 16px | 16px | 15px |
| Line Height | 1.6 | 1.6 | 1.5 |
Spacing
| Setting | Desktop | Tablet | Mobile |
|---|---|---|---|
| Gap | 24px | 20px | 16px |
| Margin | 32px | 24px | 16px |
| Padding | 32px | 24px | 20px |
Device Visibility
Show/Hide Elements
Control element visibility per device:
| Setting | Effect |
|---|---|
| Hide on Desktop | Visible only on tablet/mobile |
| Hide on Tablet | Hidden on tablet |
| Hide on Mobile | Hidden on mobile |
Use Cases
- Desktop-only: Complex graphics
- Mobile-only: Simplified navigation
- Hide on mobile: Large images
Setting Visibility
- Select element
- Go to Advanced settings
- Toggle visibility per device
Mobile-First Approach
Strategy
- Design for mobile first
- Add tablet enhancements
- Add desktop enhancements
Benefits
- Forces content prioritization
- Ensures mobile usability
- Easier to scale up than down
Responsive Patterns
Stacking Columns
Desktop: Side-by-side Mobile: Stacked
Desktop:
[Column 1] [Column 2]
Mobile:
[Column 1]
[Column 2]
Configure column widths:
Desktop: 50% | 50%
Mobile: 100% | 100%
Simplified Layout
Desktop: Full features Mobile: Essential only
Hide secondary elements on mobile.
Position Change
Desktop: Center Mobile: Bottom sheet
Desktop: Position center, width 500px
Mobile: Position bottom, width 100%, radius top only
Responsive Typography
Scaling Text
| Element | Desktop | Mobile |
|---|---|---|
| Display | 48px | 32px |
| H1 | 36px | 28px |
| H2 | 28px | 24px |
| H3 | 24px | 20px |
| Body | 16px | 16px |
| Small | 14px | 14px |
Line Height
Adjust for readability:
Desktop: 1.6
Mobile: 1.5 (tighter on small screens)
Touch Targets
Minimum Sizes
For touch accessibility:
| Element | Minimum Size |
|---|---|
| Buttons | 44px height |
| Links | 44px touch area |
| Close button | 44x44px |
| Form inputs | 44px height |
Spacing
Add space between touch targets:
Gap: 8-12px minimum between tappable elements
Mobile Popup Patterns
Bottom Sheet
Position: Bottom center
Width: 100%
Border Radius: 16px 16px 0 0
Animation: slideInUp
Fullscreen Mobile
Position: Center
Width: 100%
Height: 100%
Border Radius: 0
Compact Modal
Position: Center
Width: 90%
Max Width: 400px
Padding: 24px
Testing Responsive Design
In Editor
- Switch between device views
- Check all breakpoints
- Verify content fits
- Test interactions
Real Device Testing
- Use browser dev tools
- Test on actual devices
- Check different screen sizes
- Verify touch interactions
Common Checkpoints
- Text is readable
- Buttons are tappable
- Images fit properly
- Layout doesn't break
- Close button accessible
- Forms are usable
- Animations perform well
Best Practices
Content
- Prioritize — Show essential content on mobile
- Simplify — Fewer elements on smaller screens
- Readable — Never below 14px font size
- Scannable — Short paragraphs
Layout
- Stack vertically — Use single column on mobile
- Full width — Maximize screen space
- Adequate padding — Don't crowd edges
- Touch-friendly — Large tap targets
Performance
- Optimize images — Smaller images for mobile
- Reduce animations — Simpler on mobile
- Test performance — On real devices
Common Mistakes
❌ Not testing on mobile ❌ Text too small ❌ Touch targets too small ❌ Horizontal scrolling ❌ Fixed widths on mobile ❌ Ignoring orientation changes
Troubleshooting
Content overflows:
- Check fixed widths
- Use max-width instead
- Verify responsive values
Text too small:
- Increase mobile font size
- Never below 14px
Can't tap elements:
- Increase touch target size
- Add spacing between elements
- Check z-index
Layout breaks:
- Check column widths
- Verify responsive settings
- Test all breakpoints