Log In / Sign Up

Components

Layouts

Templates

Responsive Email Layout

This layout combines fluid tables and @media queries (where supported) to create a two-column design that stacks on small screens—even in Gmail and Outlook.

✅ Why It Works

TechniquePurpose
Table structureReliable across email clients
Inline stylesPrevents overrides from email clients
display: block !important in media queryForces stacking on mobile
Max-width containerKeeps content readable

🔧 Copy-Ready Code (Responsive)

See the Pen Untitled by Email Code Camp (@EmailCodeCamp) on CodePen.

📱 How It Works on Mobile

  • At screen widths below 600px, each .column block takes up the full width.
  • Images and text naturally flow in a stacked format.
  • The layout stays readable and clean—no squishing or overflow.

💡 Pro Tips

  • Always test in real inboxes: Gmail, Outlook, Apple Mail, etc.
  • Keep your total width under 600px for the best mobile experience.
  • Inline styles + !important in media queries help override default quirks.