How to Use Media Queries in HTML Email Design

Up until now, we have built a rigid, unmoving spreadsheet. If you opened your current code on an iPhone, the text would be tiny because the phone would zoom out to show the full 640px width. In this chapter, we perform the magic trick: converting a side-by-side table row into a vertical stack of content blocks for responsive email templates.

1.1 "Stack" in HTML Emails

Responsive email design relies on a single core concept: Overriding the Table Behavior.

• Default State (Desktop): Table cells (<td>) naturally sit next to each other. They share the width of the row.
• Target State (Mobile): We want the cells to behave like <div> blocks. We want them to break onto their own lines and expand to fill the screen.

1.2 The Media Query (The Trigger)

First, we tell the browser when to change the layout. We use a CSS "Media Query" targeting screens smaller than 480px (standard mobile width).

CSS

@media (max-width: 480px) {
/* 1. Unlock the Containers */
.t141, .t230 {
display: block !important;
}

/* 2. Transform the Cells */
.t100, .t139 {
display: block !important;
width: 100% !important;
max-width: 600px !important;
}
}

• display: block !important: This is the engine of the transformation. By default, a <td> has display: table-cell. By changing it to block, we force the browser to treat it like a standard paragraph or div. Blocks do not sit next to each other; they stack.
• width: 100% !important: On desktop, the "Calming Cleanser" cell was locked at 307px. On mobile, we force it to expand to the full width of the phone screen.
• !important: You will see this tag everywhere in email CSS. It is necessary because inline styles (the styles written directly on the HTML tags, like width="307") usually override header styles. !important allows our Header CSS to win the fight against the Inline HTML.

Tabular is a drag and drop email builder that helps you design responsive email templates without writing HTML or CSS.

1.3 Gutter Problem of HTML Emails

Remember the empty <td> we added in Chapter 4: Creating Columns in HTML Emails Nested table layouts to create the 24px gap between products?

If we simply stacked the products, that empty cell would also "stack." You would end up with a 24px-tall invisible box sitting between your products, creating awkward vertical spacing.

CSS

@media (max-width: 480px) {
/* Hide the gutter */
.t97 {
width: 0 !important;
display: none !important;
}
}

• display: none !important: This removes the element from the flow entirely.
• The Result: The "Right Product" stacks immediately below the "Left Product."
• Vertical Spacing: If you want space between the stacked products, you would typically add margin-bottom: 20px to the .t100 class inside this media query.

1.4 The "Hide & Show" System

Sometimes, an image is just too wide for mobile, or a button is too small for a thumb tap. We use utility classes to swap elements entirely.

CSS

@media (min-width: 481px) {
.hd { display: none !important } /* Hide on Desktop */
}
@media (max-width: 480px) {
.hm { display: none !important } /* Hide on Mobile */
}

• Usage: Look at the Hero Image in the template. You might see two image tags next to each other in the code—one with class hm (Hide Mobile) and one with class hd (Hide Desktop).
• The Mechanism: The browser actually downloads both images, but CSS hides one. This allows you to serve a wide banner to Outlook users and a square, tall banner to iPhone users.

Final Words

You have made the email responsive.

1. The Trigger: Used @media (max-width: 480px) to target phones.
2. The Stack: Used display: block and width: 100% to force table cells to stack vertically.
3. The Cleanup: Hidden the horizontal gutter (.t97) using display: none.
4. The Swap: Learned how to use .hm and .hd classes to show different content to different devices.

Ready for Chapter 6? We enter the "Dark Arts." We will cover the specific hacks needed for Outlook Backgrounds (VML) and the Gmail Clipping Bug. This is the final polish that separates amateurs from pros.