Mobile5 min read•Audience: Designers, Developers
Responsive & Touch Target Testing
Validate mobile column stacking, touch target sizes (44x44px min), and font legibility on small screens.
Key Takeaways
- Check that all call-to-action buttons meet the minimum touch target size of 44x44 pixels.
- Ensure body text is at least 14px (16px recommended) on mobile to prevent automatic zooming by iOS.
- Verify that side-by-side columns stack cleanly without horizontal scrollbars.
Apple & Google Touch Target Guidelines#
Both Apple Human Interface Guidelines and Google Material Design mandate a minimum touch target size of 44x44 points / pixels:
- In PostBrix, set your button vertical padding to at least
14pxand horizontal padding to24px. - For mobile, enable Fluid on Mobile so buttons span 100% width, allowing effortless thumb clicks.
- Keep at least
12pxof vertical spacing between multiple stacked buttons or links to prevent accidental taps.
Preventing Horizontal Scrollbars on Mobile#
Horizontal scrollbars occur when elements have fixed widths wider than the mobile viewport (320px–375px):
- Fixed Width Images: Ensure images have
width="100%"or explicit percentage constraints inside their columns. - Unbroken Long Strings: Long URLs or tracking tokens will stretch table cells. Apply
word-break: break-wordor shorten URLs. - Fixed Tables: Use PostBrix responsive column blocks rather than static multi-column HTML tables.
Frequently Asked Questions
Why does Apple Mail zoom in slightly when opening my email?
iOS Mail automatically magnifies emails that contain body text smaller than 13px. Ensure all body copy is at least 14px (ideally 16px) to maintain a stable viewport.
How do I test how reverse stacking looks on a real phone?
Toggle "Reverse Stacking on Mobile" on the Section, switch to Mobile preview in the editor, or send a live test to your smartphone.