Recommended Free Tools
iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
A single mobile media query can update the cells in a set of email cards when the template gives those cards a consistent table structure: their content rows sit directly inside the card’s <tbody>. A direct-child selector can target those cells without spilling into nested tables. It is a reusable pattern—not a guarantee that one rule will fix every email client or mobile webmail view.
Why the table structure makes one rule possible
The approach works when a shared email wrapper accepts its content as <tr> rows, and each card keeps its own header, body, and footer rows directly inside one <tbody>. If every card follows that contract, a single selector can reach the cells in each card’s own rows.
For example, with a card table marked up using class="cp-card", use:
Free tools Windows power users keep installed
One-click scans. No signup required.
@media only screen and (max-width: 600px) {
.cp-card > tbody > tr > td {
padding-right: 20px !important;
padding-left: 20px !important;
}
}The 600px breakpoint and 20px side padding above are example settings from the template pattern, not universal recommendations. Choose values that suit your email’s layout and test them in the clients your audience uses.
#1 Best Overall
What the selector includes—and excludes
Each direct-child step narrows the target
In .cp-card > tbody > tr > td, each > means “direct child of.” The selector follows this path: the card table, its direct tbody, each row directly inside that body, and each cell directly inside those rows. This scopes the rule to the card’s own rows.
The explicit tbody matters
Browsers and rendering engines can insert a tbody even when it is missing from the HTML you wrote. As a result, .cp-card > tr may not match the rows as the rendered table is structured. Including tbody makes the expected table hierarchy explicit.
Rank #2
- Mr. Pen address book features a hardcover design in pink blush and includes 80 sheets with alphabetical A–Z tabs, providing a durable and organized way to record and access contacts.
- The address book is made with high-quality paper that is smooth and suitable for pen or pencil, ensuring clear, legible entries for all your contact details.
- This compact address book is portable and convenient to carry in a bag, desk drawer, or personal workspace without sacrificing writing space.
- The book includes an inner pocket for storing important notes, business cards, or additional reference materials, while the elastic band and pen loop keep everything secure and accessible.
- This address book is ideal for professionals, students, and families who want a reliable and organized solution to store addresses, phone numbers, emails, and other essential contact information.
A descendant selector can change nested components
A broader rule such as .cp-card td matches every cell anywhere inside the card, including cells in nested tables. That can override padding chosen for a small scorecard, quote block, or button layout. The direct-child selector avoids those nested cells as long as they remain inside a separate inner table rather than becoming direct card rows.
How to handle existing inline styles
The example uses !important because its media-query declarations need to override competing inline padding in that template. Use it only where the cascade requires it: it can make an override win, but it does not fix a selector that targets the wrong cells or a client that does not apply the media query. Keep critical desktop and mobile-friendly layout styles inline as a fallback instead of relying on the query alone.
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 less and provides media-query examples, but that is a framework convention, not evidence that every email should use 596px—or 600px. Pick a breakpoint based on where your own layout needs to change, and check how the email behaves just above and below it.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Where the media query may not take effect
Gmail documents support, with limits
Google’s Gmail CSS support documentation, last updated September 15, 2026, says Gmail supports standard media queries against screen width, orientation, and resolution. It also warns that Gmail may ignore unsupported CSS properties and selectors. That establishes general media-query support; it does not establish that this exact selector works in every Gmail app version or environment.
Rank #4
- Large print address and password keeper
- 7 1/4" long x 5" wide
- Includes 96 alphabetized pages
- Generous large print makes it easy to reference and record important information
- Spiral-bound pages lie flat when open
Mobile browser webmail is different from a native app
Opening webmail in a phone browser does not necessarily produce the same rendering as using a native email app. Adobe’s email design guidance notes that Gmail Web and Outlook Web opened in a mobile browser can show desktop webmail interfaces, that Gmail Web may strip <style> blocks, and that responsive CSS may therefore be out of reach. For this context, Adobe advises against depending on media queries or style blocks for critical layout properties.
Quick Recap
Best Value
- 【Keep Your Contacts Organized】 This 7.7" x 5.7" address book keeps all your information in one place, helping you keep track of important dates, numbers, addresses and passwords.
- 【Colorful Alphabetical Tabs】 Address book features individual tabs with colorful design that help you easily organize and quickly locate the phone numbers and addresses of your contacts.
- 【Plenty of Writing Space】 Our phone number book has 384 entries to record contacts necessary information, 64 entries to store Internet passwords. And includes birthday pages, anniversary pages, notes pages, emergency contact pages, etc.
- 【Premium Quality and Convenient Design】 The leather hardcover book makes telephone address book elegant and practical. Sturdy double-wire binding allows the address book to lay flat 360 °. And comes with thick no-bleed 100gsm paper, elastic band, inner pocket.
- 【 Perfect Gift for Everyone】 Address and password book is a thoughtful and stylishl gift, keep work and life organized. The contact book with large fonts is geared for seniors.
Build a resilient version of the pattern
- Keep the card rows predictable. Put each card’s own rows directly under its
tbody. If the markup varies, a shared direct-child selector may miss cells or require additional targeted rules. - Use the narrow selector for the mobile enhancement. Apply
.cp-card > tbody > tr > tdwhen you want to adjust direct card cells without changing nested-table cells. - Make the base layout usable without the query. Prefer a simple table-based layout and inline styling for critical properties, so the email still has a workable structure where responsive styles are unavailable.
- Test the environments that matter. Check the native email applications and mobile-browser webmail experiences relevant to your readers; do not assume that support documented for Gmail settles behavior in other clients.
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.
