What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
A single mobile media query can adjust the padding of every card in an email when the cards share a predictable table structure: each card’s own content rows sit directly inside its <tbody>. The direct-child selector keeps the change out of nested tables, but it cannot guarantee identical rendering in every email client or mobile webmail browser.
Use a shared table structure to target every card
Suppose an email template builds each card from a table with a header, body, and footer. If each of those rows is a direct child of the card’s <tbody>, one selector can target the cells in all of the card’s own rows:
As an Amazon Associate I earn from qualifying purchases.
@media only screen and (max-width: 600px) {
.cp-card > tbody > tr > td {
padding-left: 20px !important;
padding-right: 20px !important;
}
}This is an illustrative rule, not a universally optimal breakpoint or padding prescription. In the original template example, the mobile rule changes side padding from 32px to 20px and uses !important to override competing inline styles.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsWhat each part selects
.cp-cardidentifies a card table.> tbodyrequires the body to belong directly to that table.> trselects rows directly inside that body.> tdselects the cells directly inside those rows.
Because the selector follows the table’s direct row structure, it can cover the card’s header, body, and footer cells without reaching into a nested component table.
#1 Best Overall
Keep the explicit tbody
Browsers and rendering engines can insert a <tbody> around table rows even when the author’s markup omits it. A selector such as .cp-card > tr may therefore fail to match the rendered structure. Including tbody makes the expected relationship explicit. The template example and its selector illustrate this structure.
Why not use .cp-card td?
A space in .cp-card td means “any descendant cell,” not just a cell in the card’s own rows. If a card contains a nested table—for example, a score block, quote, or button—the broader selector can also change that nested table’s cell padding. That can undo spacing deliberately set for the component.
| Selector approach | What it reaches | Trade-off |
|---|---|---|
.cp-card > tbody > tr > td |
Cells in rows directly inside the card’s body | Preserves nested-table styling, provided the card follows this structure |
.cp-card td |
All descendant cells, including cells in nested tables | Simpler, but can unintentionally override nested component spacing |
Direct-child scoping works only while the markup contract remains consistent. If some cards put content in another nested wrapper or use different row structures, adapt the selector to that markup rather than assuming one rule will reach every intended cell.
Choose a breakpoint for the template, not by habit
The example uses a maximum width of 600px. Foundation for Emails documents a Small breakpoint of 596px or smaller and provides media-query examples; that is a framework convention, not evidence that every email should use 596px. Foundation for Emails’ breakpoint guidance is a useful point of comparison. Choose a breakpoint that suits the template’s layout, then verify it in the clients and viewport sizes that matter to your audience.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Understand the limits of email-client support
Google’s Gmail CSS documentation says Gmail supports standard media queries for screen width, orientation, and resolution. It also warns that Gmail may ignore unsupported CSS properties and selectors. This establishes support for media queries generally, not uniform behavior for this exact selector across every Gmail app version or email environment. Google’s Gmail CSS support documentation was last updated on 2026-09-15 UTC.
Mobile webmail opened in a browser is a separate case from a native email app. Adobe notes that Gmail Web and Outlook Web in a mobile browser can render differently: a browser may display the desktop webmail interface, Gmail Web may strip <style> blocks, and responsive CSS may not be able to control the result. Adobe advises against relying on media queries or style blocks for critical layout properties in this context. Adobe’s email design guidance recommends static, table-based layouts and simple inline CSS for compatibility.
Quick Recap
Build a fallback, then test the environments that matter
- Keep the essential layout usable with a simple, fluid table structure and inline critical styles.
- Use the media query as an enhancement for clients that apply it, rather than as the only way to make the email readable.
- Keep selectors as narrow as the markup allows so mobile adjustments do not leak into nested components.
- Check the actual native apps and webmail-in-browser contexts your readers use; the available documentation does not establish a comprehensive compatibility matrix for all current clients and versions.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
Free tools Windows power users keep installed
One-click scans. No signup required.
