Responsive Design & Mobile Optimization
How PostBrix handles automatic mobile column stacking, reverse stacking, viewport breakpoints, and per-block mobile overrides.
Key Takeaways
- Over 60% of modern email opens happen on mobile devices. PostBrix builds responsive behavior into every template by default.
- Multi-column layouts automatically stack to 100% width on mobile viewports (<480px).
- Use Reverse Stacking to preserve alternating visual zig-zag layouts on mobile screens.
- Apply per-block mobile overrides for font size, padding, alignment, and visibility without affecting the desktop view.
How Mobile Stacking Works#
In desktop mode, columns sit side-by-side using calculated percentage widths (e.g. two 50% columns inside a 600px container equal 300px each).
When viewed on a mobile device:
- The default
@media only screen and (max-width:480px)media query triggers. - The columns expand to
display: block !important; width: 100% !important; max-width: 100% !important;. - The columns stack vertically: the leftmost column appears first, followed by the second column directly underneath.
Reverse Stacking for Zig-Zag Layouts#
A popular email design pattern is the alternating "zig-zag" layout:
- Row 1: [Image Left] [Text Right]
- Row 2: [Text Left] [Image Right]
By default on mobile, Row 2 would stack as [Text] then [Image], causing an awkward sequence of:
[Image] → [Text] → [Text] → [Image].
To fix this:
- Select Row 2 (the Section).
- Toggle Reverse Stacking on Mobile in the right panel.
- PostBrix adjusts the column order in mobile markup (using
direction: rtltable tricks supported across iOS Mail and Gmail) so Row 2 stacks as[Image] → [Text].
Per-Block Mobile Overrides#
Every block in PostBrix features a dedicated Mobile Tab in the Properties Inspector:
- Hide on Mobile / Hide on Desktop: Selectively show or hide elements based on screen size (e.g., hiding a large decorative banner on mobile to save vertical scrolling).
- Mobile Font Size: Scale down 36px headings to 24px on phone screens.
- Mobile Text Alignment: Center-align buttons and text on mobile while keeping them left-aligned on desktop.
- Mobile Padding: Reduce 40px desktop padding to 16px to maximize readable screen width.
Frequently Asked Questions
What is the default mobile breakpoint in PostBrix?
PostBrix uses a 480px breakpoint (@media only screen and (max-width:480px)), matching industry standards across Apple Mail, Gmail, and Samsung Email.
Can I prevent two columns from stacking on mobile?
Yes. Toggle "Don't stack on mobile" on the Section. This wraps columns in an mj-group container, keeping them side-by-side even on small phone screens.