How one CSS media query handles mobile layout for all transactional emails

A developer at CogniPrep built a single HTML email shell function that wraps all transactional and campaign emails, accepting body rows and an unsubscribe URL as inputs. Because every content row is a direct child of the main card table, a single media query targeting .cp-card > tbody > tr > td is enough to adjust side padding for all emails on mobile screens under 600px. The use of child combinators instead of descendant selectors prevents the rule from bleeding into nested tables like score cards or buttons, preserving their individually set padding. The !important flag is intentional, not a shortcut, since inline styles dominate stylesheet rules in email clients and would otherwise override the media query. The template also handles preheader text — the inbox preview line — using four simultaneous hiding techniques and repeated zero-width spaces to stop email clients from appending unintended body copy to the preview.