How to code responsive email headers and footers in Attentive

Attentive's drag-and-drop editor renders cleanly on desktop and breaks on mobile: header logos overflow, columns stack in the wrong order, footer links shrink below tappable size. Fixing it means going past the editor and into the HTML underneath.

Here's exactly how to code a header and footer that hold up on any device, and where that code plugs into an Attentive template.

Understanding Attentive's design limitations

Attentive's drag-and-drop editor is built for speed, not for pixel-level control at every breakpoint. A layout that looks right in the desktop preview can break the moment it hits a phone screen. This is a known limitation for any brand running on platform stacks like Attentive, not a one-off bug.

To fix it, you edit the HTML directly instead of relying on the drag-and-drop preview.

Preparing your design files

Before you start coding, get the actual design file, not a screenshot. Figma is the standard here: it lets you inspect exact spacing, font sizes, and color values instead of guessing from a static export.

Two things make this faster if your team hasn't set them up yet. A shared design system keeps header and footer components consistent across every future template, instead of rebuilding them from scratch each time. Figma's dev mode lets you pull precise CSS values directly from the file rather than eyeballing them from a screen.

Scalero has covered this ground in more depth. Figma for non-designers walks marketers through getting comfortable in Figma without a design background, and our library of free Figma email templates gives you a header and footer structure to start from instead of building one cold. If you're regularly moving files from Figma into production, these Figma plugins for email design cut a lot of the manual handoff work.

Controlling what shows before the header even renders

The inbox preview line is technically part of your header code, even though nobody thinks of it that way. Left alone, most clients pull that preview text straight from whatever HTML sits first in your body, usually a stray "view in browser" link or alt text you never meant a subscriber to see.

The fix is a hidden block of filler characters placed right above your visible header: display: none; max-height: 0px; overflow: hidden; wrapped around repeated entities like ‌ and  . Litmus documents the exact snippet: it eats up the remaining preview space so your actual preheader copy is what shows, not whatever the client grabbed on its own.

Coding responsive headers

Start with a mobile-first media query, then layer the desktop layout on top of it:

@media only screen and (max-width: 600px) { /* mobile styles */ }

This stacks elements vertically and resizes images on smaller screens instead of squeezing the desktop layout into a narrower frame. Set every header image with a fixed width attribute as a fallback: Outlook's rendering engine ignores CSS max-width, so without it your logo can render at full size on a phone screen.

If you're coding this by hand across many templates, MJML handles the responsive breakpoints for you and compiles down to the same table-based HTML email clients expect.

Dark mode breaks headers a different way: a transparent-background PNG logo in dark navy can vanish against a black inbox. Crafting Email's fix is to bake a 1-2px stroke or outer glow into the logo file itself, since Gmail doesn't support the CSS-based dark mode swap that would otherwise handle it. Test before you ship, either way: Litmus or Email on Acid will show you the actual render across real clients, not just a browser preview.

Coding responsive footers

Footer links and contact info need to survive a thumb, not just a mouse. Keep every tappable element at least 24 by 24 CSS pixels, the minimum size WCAG 2.5.8 sets for pointer targets, with enough padding that adjacent links don't collide.

Media queries do the rest of the work: simplify a multi-column footer into a single stacked column on mobile, and increase font size slightly so unsubscribe and contact links stay legible without zooming.

Testing and refining

Once the code is in place, test it the way a subscriber will actually see it, across clients and screen sizes, not just in Attentive's own preview. Scalero's own guide to coding HTML emails from scratch covers the client-by-client quirks worth checking for beyond header and footer layout.

From there, A/B test footer link placement and header CTA position specifically. A responsive layout that renders correctly can still convert poorly if the tappable elements aren't where a mobile reader expects them.

The bottom line

A responsive header and footer aren't cosmetic. They're the first and last thing a subscriber touches in every email you send, and a broken one sets the impression before the body copy even loads.

If your team is spending more time patching Attentive's editor than shipping campaigns, Scalero's email coding team builds and maintains templates like this so you don't have to.