# All About Email Media Queries

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebPage",
  "headline": "All About Email Media Queries",
  "description": "Unlock responsive email design with our step-by-step guide on Email Media Queries. Learn how to make your emails look great on any device!",
  "image": "https://res.cloudinary.com/mailmodo/image/upload/v1723742659/strapi/Email_media_queries_3cd8426044.png",
  "datePublished": "2023-09-08T18:21:42.442Z",
  "dateModified": "2025-01-08T06:27:33.875Z",
  "publisher": {
    "@type": "Organization",
    "name": "Mailmodo",
    "url": "https://www.mailmodo.com/",
    "sameAs": [
      "https://www.linkedin.com/company/mailmodo/",
      "https://www.facebook.com/mailmodo/",
      "https://www.instagram.com/mailmodohq/",
      "https://www.youtube.com/@mailmodo"
    ],
    "logo": "https://www.mailmodo.com/static/images/logo/logo-full.svg",
    "description": "Mailmodo is a complete email marketing platform that helps email marketers to create and send interactive emails to drive growth and engagement.",
    "address": {
      "@type": "PostalAddress",
      "addressLocality": "Lewes",
      "addressRegion": "DE",
      "postalCode": "19958",
      "streetAddress": "Mailmodo Technologies Inc. 16192, Coastal Highway",
      "addressCountry": {
        "@type": "Country",
        "name": "US"
      }
    },
    "contactPoint": {
      "@type": "ContactPoint",
      "email": "enquiries@mailmodo.com",
      "contactType": "customer service"
    }
  }
}
</script>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "All About Email Media Queries",
  "description": "Unlock responsive email design with our step-by-step guide on Email Media Queries. Learn how to make your emails look great on any device!",
  "image": "https://res.cloudinary.com/mailmodo/image/upload/v1723742659/strapi/Email_media_queries_3cd8426044.png",
  "datePublished": "2023-09-08T18:21:42.442Z",
  "dateModified": "2025-01-08T06:27:33.875Z",
  "author": {
    "@type": "Person",
    "name": "Aparna Seshadri",
    "url": "https://www.mailmodo.com/guides/author/aparna-seshadri/"
  },
  "publisher": {
    "@type": "Organization",
    "name": "Mailmodo",
    "logo": {
      "@type": "ImageObject",
      "url": "https://www.mailmodo.com/static/images/logo/logo-full.svg"
    }
  },
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://www.mailmodo.com/guides/email-media-queries/"
  }
}
</script>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "@id": "#creator",
  "description": "Email marketing software to create and send interactive emails to maximize conversions and reinvent your user journey",
  "email": "support@mailmodo.com",
  "image": "https://www.mailmodo.com/static/images/og-image.png",
  "knowsAbout": "Email marketing",
  "legalName": "Mailmodo Technologies Inc.",
  "location": "United States",
  "logo": "https://www.mailmodo.com/static/images/logo/logo-full.svg",
  "name": "Mailmodo",
  "sameAs": [
    "https://twitter.com/mailmodo",
    "https://www.facebook.com/company/mailmodo/",
    "https://www.linkedin.com/company/mailmodo/"
  ],
  "url": "https://www.mailmodo.com/"
}
</script>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://www.mailmodo.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Guides",
      "item": "https://www.mailmodo.com/guides/"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "email media queries",
      "item": "https://www.mailmodo.com/guides/email-media-queries/"
    }
  ]
}
</script>

## Table of contents

- What are media queries?
- Syntax of media query
- Benefits of email media queries
- Supporting video in specific email clients
- Media Queries and inline CSS go hand in hand
- Final takeaway

In today's world, 81% of people check their emails on their phones, so you need a great user experience.

Wouldn't it be great if emails appeared the same way they appeared on desktops?

Yes, every developer's dream is to provide a great mobile experience for their users.

With a tool like email media queries on your side, optimizing your design for devices has never been easier. The rules for **email media queries** are the same as those for web coding, except that nesting isn't allowed.

This guide is a deep dive into email media queries and how they work hand in hand in delivering responsive email designs.

## What are media queries?

Media queries is a cascaded style sheet technique(CSS) introduced in CSS3. It allows the HTML content of a web page to adapt to a device’s type, such as desktop or tablet, or specific parameters, such as screen resolution or viewport, among others.
It uses the @media rule to include a block of CSS properties only if a certain condition is true.

  

 Here is an example of how it is used in the code,

  

@media only screen and (max-width: 500px) {

body {

background-color: green;

}

}

  

The code tells you that if the screen, i.e., the browser window is 500px or smaller, the background color will be green.

Email media queries are similar to media queries as it helped make emails more responsive. 
## Syntax of media query

Before moving further, let’s understand the syntax of media query 👇

  

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

body {

background-color: light blue;

}

}

  
  

A media query code consists of the following components:

-   Media type lets you pick your category from all, print, screen and speech.
    

For instance, for emails, the media type is always screen.

-   Expressions are, in simple terms, the specific conditions that allow you to target the media query. It tests features such as width, height, and aspect ratio. Most commonly used media features include:
    

     -   Max and min-width
    
    -   Max and min-device width
    
    -   Device pixel ratio

## Benefits of email media queries

Responsive design is why you use a media query in HTML emails.

  

### 1. Scaling down content in different devices
    

It is common for developers to design desktop-first content with defined width values to your tables, 700 px. Without a media query, content gets scaled down on mobile devices, leading images, and text to break down.

  

For instance,


```
<table role=" presentation" border="1px" cellpadding="10" cellspacing="0" maxWidth="700" margin=" auto"

align=" center" class="main-content">

<tr>

<td>Email</td>

<td> Media </td>

<td> Query </td>

</tr>

<tr>

<td>Email</td>

<td> Media </td>

<td> Query </td>

</tr>

</table>

  ```
  

The output of the code looks like this, 
![Screenshot 2023-09-08 at 10.01.39 PM.png](https://res.cloudinary.com/mailmodo/image/upload/f_auto,q_100/v1694197935/strapi/Screenshot_2023_09_08_at_10_01_39_PM_a9ffaa3d1b.png)
For desktops the content style can be coded like this,

  ```
<style type="text/css">

.main-content{

width: 600px;

}

</style>
  ```
  

It is likely that content on mobile devices will be scaled down and cannot be fit on the

whole screen if the same code is applied. A mobile phone's viewport is usually smaller

than 600 px. Thus, media queries are perfect for solving this as you transform them to

suit the screen width of the mobile device easily.

  
  ```
<style type="text/css">

.main-content{

width: 600px;

}

  

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

.main-content {

width: 100% !important;

}

}

</style>
  ```

### Using breakpoints

Using media queries goes beyond resizing to fit different layouts. Instead, you can use it to target different breakpoints. The code below will let you know how to use it to target a wide range of devices.

  
  ```
<style type="text/css">

/* Extra small devices (phones, 600px and down) */

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

  

/* Small devices (portrait tablets and large phones, 600px and up) */

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

  

/* Medium devices (landscape tablets, 768px and up) */

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

  

/* Large devices (laptops/desktops, 992px and up) */

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

  

/* Extra large devices (large laptops and desktops, 1200px and up) */

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

</style>
  ```
  

  

👆This would help you apply different styles to your tables, fonts, images, or any HTML element with the media query.

  
  

### Managing content for device Orientation

Media queries can also target device orientation, not just viewport size. Although this is not

always necessary where you can define different styles based on orientation as follows:

  
  ```
<style type="text/css">

@media screen and (orientation: landscape) {

/* your css rules here */

}

</style>
  ```
  

## Supporting video in specific email clients

A lot of engaging content simply won’t work with some email clients. Using animations and video in an email is great but ruins the user experience when done poorly.

  

Webkit-based browsers such as Applemail support video backgrounds, while email clients like Gmail and Outlook don't support the technical requirements to play video inside the email.

  

The code is shown below, 👇

  
  ```
<style type="text/css">

video[class="video"]{

display: none;

}

@media screen and (-webkit-min-device-pixel-ratio: 0) {

video[class="video"]{

display: block;

}

}

</style>

  
  ```
👆This allows display of elements to supported clients while it hides for everyone else.

  

### Managing Color Schemes during the Rendering Process

Another use case for media queries lies in color schemes. The color scheme is a CSS property that allows an element to indicate which color scheme it can be rendered in. Common choices of color schemes include “dark,” “light,” or a day or night mode.

  

The prefer-color-scheme CSS media feature helps detect if a user has requested light or dark schemes. This allows email clients to handle color schemes differently, either by completely inverting the colors of the email or by not changing anything so that you can design according to a specific color scheme or keep it dark.

  

This is how you can implement using media query:

  
  ```
<style type="text/css">

.text{

color: black;

}

@media (prefers-color-scheme: dark ) {

.text{

color: white;

}

}

</style>
  ```
  

## Media Queries and inline CSS go hand in hand

Since email developers add inline styles to HTML elements, styles in media queries must use the! important property. With CSS, an email client will use the order of CSS rules to determine which to be rendered as media queries are declared at the top of an HTML document, and any inline styles applied will take precedence.





## Final takeaway
Email media queries help craft the best email experiences, cater to diverse devices, and open up exciting possibilities for designers. They enable you to tailor your email design and make it responsive, as they cater to a broad audience.

Testing is critical to any innovative technique. Hence, with thorough evaluation, you can ensure that your campaigns adapt beautifully and deliver exceptional user experiences across all devices without distortions.

## Frequently Asked Questions

### How do I add media query to HTML email template?

As email developers add styles  to HTML elements, styles in media queries can be added with !important. This helps reveal the order of precedence in CSS.

### What are media queries for HTML emails?


It allows us to apply specific CSS styling based on a set of conditions we apply with the media query.

### Can I use media queries in email template?


To ensure proper email rendering, please inline the default CSS, while retaining the media query CSS in the ```<head>``` of your email. This approach allows media query styles to take precedence when triggered, and it's worth noting that clients supporting media queries do not remove the ```<head>``` or ```<style>``` sections.

### What are media queries in email?

Email media queries, a component of CSS3, empower developers to tailor their content for diverse presentations or devices. These code blocks are embedded within the ```<style>```  section of your email, governing its appearance at varying screen sizes.

### Why do we use @media in HTML?

The @media rule is employed within media queries to implement distinct styles based on various media types or devices. Media queries serve the purpose of examining multiple parameters, including viewport dimensions (width and height) and device dimensions (width and height).

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "How do I add media query to HTML email template?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "As email developers add styles  to HTML elements, styles in media queries can be added with !important. This helps reveal the order of precedence in CSS."
      }
    },
    {
      "@type": "Question",
      "name": "What are media queries for HTML emails?\n",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "It allows us to apply specific CSS styling based on a set of conditions we apply with the media query."
      }
    },
    {
      "@type": "Question",
      "name": "Can I use media queries in email template?\n",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "To ensure proper email rendering, please inline the default CSS, while retaining the media query CSS in the ```<head>``` of your email. This approach allows media query styles to take precedence when triggered, and it's worth noting that clients supporting media queries do not remove the ```<head>``` or ```<style>``` sections."
      }
    },
    {
      "@type": "Question",
      "name": "What are media queries in email?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Email media queries, a component of CSS3, empower developers to tailor their content for diverse presentations or devices. These code blocks are embedded within the ```<style>```  section of your email, governing its appearance at varying screen sizes."
      }
    },
    {
      "@type": "Question",
      "name": "Why do we use @media in HTML?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "The @media rule is employed within media queries to implement distinct styles based on various media types or devices. Media queries serve the purpose of examining multiple parameters, including viewport dimensions (width and height) and device dimensions (width and height)."
      }
    }
  ]
}
</script>

---

**Author: Aparna Seshadri**

Aparna is an accomplished writer with 2 years of hands-on experience, a keen eye for detail and a strategic approach and delivers impactful SEO results.

