What are CSS Media Queries?

Media queries allow us to apply specific CSS styling to our HTML based on the set of rules we apply with the media query.  For example, in a separate lesson on Dark Mode in HTML Email we used a media query to apply dark mode specific CSS.  Similarly, we can set different style decorations to website and HTML email designs based on the width of the window or device we are viewing the design on.

Min-Width vs. Max-Width Media Queries

With responsive design, whether it’s for the web or for HTML email, we have the choice to design for the narrowest screen width or the largest screen width first. Designing for the narrowest screen width first is also known as “Mobile-First Design”.

Min-Width

The following media query uses the minimum width declaration:

@media only screen and (min-width: 600px)  {...}

The means that if the device width or screen is greater than or equal to 600px, then apply the following CSS in between the swirly brackets. With this method we would typically be designing for mobile-first as we use the media query to target screen widths moving up in size or greater than in width.

Max-Width

With maximum width media queries we target devices narrower than the width set.

@media only screen and (max-width: 600px)  {...}

This means that any screen width equal to or less than 600px will have the CSS we add inside of the media query.  This is my preferred method of using media queries, this way we can design for the full width email template first and then worry about making a few changes for smaller width screens.

The Responsive HTML Email Templates built and featured in the resources here use two width-based media queries for each template, a 600px width breakpoint and at 400px.  You might also consider using the value’s “599.98px” instead of 600px and “399.98px” in place of 400px similar to popular responsive frameworks on the web such as Bootstrap. For example, if you have two 300px width columns you can make sure any styling applies to 600px or less isn’t applied until just under that point with 599.98px.

Do I Still Need to Use HTML Email Tables with Media Queries?

Yes!  Media queries are not an alternative to designing HTML email templates with tables, they are an added design feature to building templates with HTML tables which are still needed for proper rendering across email templates.  In a separate lesson we’ll cover building email templates with tables and why they are required.

..continue to the next lesson: HTML Email Body.