Breakpoint and stacking

The NSW Email Toolkit uses a single responsive breakpoint at 639px.

When the screen is 639px or narrower, the layout switches to a mobile-friendly format:

columns stack vertically
images and text expand to full width
spacing adjusts for readability.

Above 640px, layouts use fixed-width tables (usually 640px), with columns displayed side by side. This ensures balance and alignment on larger screens.

What happens at 639px?

If the screen is 639 pixels wide or smaller, the email layout changes to fit a small screen.
Columns stack on top of each other to make reading easier on a phone.
Text and images expand to full width, so users don't need to scroll horizontally.
Padding and spacing also adjust to make everything easier to see.

What happens at 640px or bigger?

On wider screens (such as desktop), the layout uses fixed-width tables.
Columns appear side by side.
Content does not stretch too wide.

When to use it

Use breakpoint and stacking features when you need to:

keep multi-column layouts readable on mobile
prevent horizontal scrolling by allowing images and text to expand
apply alignment or centring only for mobile
hide or show content based on screen size.

How it works

A media query activates at 639px.
Utility classes prefixed with mobile- apply mobile-specific stacking or alignment rules.
Containers such as .wrapper and .row change from fixed width to fluid (90% or 100%).
The layout maintains reading order – source order matches stacking order.

Utility classes

Class	Purpose	Behaviour at ≤639px
`.mobile-1 → .mobile-11`	`Fractional column widths`	`Sets column max-width between 8.33% and 91.66%.`
`.mobile-12`	`Full-width column`	`Makes column 100% width and applies left/right padding.`
`.mobile-center`	`Centre element (block-level)`	`Converts element to table, removes floats, applies auto margins.`
`.mobile-left`	`Left-align element`	`Floats element left with no margin.`
`.mobile-right`	`Right-align element`	`Floats element right with adjusted margins.`
`.mobile-text-center`	`Text alignment`	`Forces text to align centre.`
`.mobile-text-left`	`Text alignment`	`Forces text to align left.`
`.mobile-text-right`	`Text alignment`	`Forces text to align right.`
`.show-on-mobile`	`Visibility`	`Displays element only on mobile.`
`.hide-on-mobile`	`Visibility`	`Hides element on mobile.`
`.mobile-full-width`	`Width utility`	`Forces element to 100% width.`
`.mobile-first`	`Table row order`	`Forces element to render as table-header-group.`
`.mobile-intermediate`	`Table row order`	`Forces element to render as table-row.`
`.mobile-last`	`Table row order`	`Forces element to render as table-footer-group.`
`.no-border-on-mobile`	`Border control`	`Removes borders on mobile for cleaner stacking.`

Examples

<x-columns columns="2" col1Width="1/2" col2Width="1/2" gutter="16">
  <slot:col1>
    <img src="feature.png" class="mobile-center" alt="Feature image">
  </slot:col1>
  <slot:col2>
    <p>Supporting text for the feature goes here.</p>
  </slot:col2>
</x-columns>

On desktop: columns sit side by side at equal width.
On mobile: columns stack, the image expands full width, and .mobile-center ensures it is centred.

Do / Don't

Use .mobile-12 for predictable column stacking.
Combine alignment helpers (.mobile-center, .mobile-text-center) with columns.
Test across multiple devices and email clients.

Don't

Hide important content using .hide-on-mobile.
Assume margins behave consistently across clients – use padding and table structure instead.
Overcomplicate breakpoints – the single 639px rule covers most use cases.

Command Palette