{"id":4059,"date":"2018-02-06T00:00:00","date_gmt":"2018-02-06T00:00:00","guid":{"rendered":"https:\/\/www.litmus.com\/blog\/understanding-media-queries-in-html-email\/"},"modified":"2023-02-27T15:29:50","modified_gmt":"2023-02-27T20:29:50","slug":"understanding-media-queries-in-html-email","status":"publish","type":"post","link":"https:\/\/www.litmus.com\/blog\/understanding-media-queries-in-html-email","title":{"rendered":"Understanding Media Queries in Email"},"content":{"rendered":"<p><a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/email-client-market-share-april-2022\/\" target=\"_blank\" rel=\"noopener\">Mobile devices<\/a> play a major role in your email subscriber&#8217;s experience, so it&#8217;s important to make sure that your <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-design\/\" target=\"_blank\" rel=\"noopener\">email designs<\/a> work well across a variety of devices and <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-client-market-share\/\" target=\"_blank\" rel=\"noopener\">email clients<\/a>. factors. <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/understanding-media-queries-in-html-email\/\">Media queries in email<\/a> are one way to make this task easier.<\/p>\n<p>Read on for a closer look at what media queries in email are, and why you should use them.<\/p>\n<div class=\"cta\">\n<table style=\"height: 27px;\" width=\"6\">\n<tbody>\n<tr>\n<td class=\"block-1\">\u00a0<\/td>\n<td class=\"block-2\">\u00a0<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<h2>What are media queries in email?<\/h2>\n<p>Media queries in email are a component of <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/css-resets\/\" target=\"_blank\" rel=\"noopener\">cascading style sheets<\/a> (CSS), the language used to style websites and email campaigns. At its most basic level, media queries act as a switch for triggering styles based on a set of rules.<\/p>\n<p>A media query consists of three parts: the media type, an expression, and the style rules contained within the media query itself.<\/p>\n<figure id=\"post-9095 media-9095\" class=\"aligncenter\"><img decoding=\"async\" class=\"alignnone\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/definingmobile-mediaquery.jpg\" alt=\"media queries in HTML email example\" width=\"800\" height=\"450\" \/><\/figure>\n<p>The <strong>media type<\/strong> allows you to declare what type of of media the rules should be applied to. You can declare four options: all, print, screen, and speech.<\/p>\n<p>For email, you can nearly always use the <em>screen<\/em> type.<\/p>\n<p><strong>Expressions<\/strong> allow you to further target devices based on specific conditions you pass the media query. Expressions test media features (different features of a device), such as width, height, aspect-ratio, and color. You can test many media features but most email designers rely on the following:<\/p>\n<ul>\n<li>max- and min-width<\/li>\n<li>max- and min-device-width<\/li>\n<li>device-pixel-ratio<\/li>\n<\/ul>\n<p>Media features can also be combined within the media query to provide greater control over targeting devices and clients.<\/p>\n<p>CSS rules can be be toggled when the email is opened on a device that satisfies both the media type and expressions.<\/p>\n<p>Media queries need to be included within a style block (typically located in the head of your HTML). This has implications when it comes to CSS rules and support for media queries. l<\/p>\n<h2>The benefits of media queries in email<\/h2>\n<p>Media queries in email allow you to fine-tune <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/email-design-trends-what-we-are-expecting-in-2021\/\" target=\"_blank\" rel=\"noopener\">email designs<\/a> so they are more usable across a wide range of devices.<\/p>\n<p>Consider this common scenario.<\/p>\n<p>Many email designers once built their emails using a desktop-only approach. The email uses fixed table widths; everything is optimized to look good on desktop and webmail clients. But when the email is viewed on mobile devices, the <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/resources\/foundations-of-email-design\/\" target=\"_blank\" rel=\"noopener\">email design<\/a> breaks down. The email is zoomed to fit, making text and buttons too small to tab. The layout is broken and unusable. The right-side of the email might be hidden from view, making horizontal scrolling necessary.<\/p>\n<p>Media queries in email let you target mobile devices and adjust styles accordingly.<\/p>\n<h3>A quick example<\/h3>\n<p>\u00a0Our <a rel=\"noopener\" href=\"https:\/\/litmus.com\/blog\/defining-and-understanding-mobile-email-approaches\">guide to mobile approaches<\/a> explains that fixed-width emails are typically scaled down on mobile devices, leading to small, unreadable text. Fluid emails, which use percentage-based widths, allow content to flow and fill various screen sizes.<\/p>\n<p>Suppose you have a container table with a fixed width of 600 pixels. In this scenario, you&#8217;d switch that fixed width of 600 pixels in desktop views to a fluid, percentage-based width (100%) on smaller screens.<\/p>\n<pre><code style=\"background: #272822; margin: 0 0 25px 0; color: #efefef;\">&lt;table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" \u00a0width=\"600\" class=\"container-table\"&gt;<\/code><\/pre>\n<p>You\u2019ll notice that a <em>class<\/em> has been added to the container table. The fixed-to-fluid switch is achieved by using classes to name and target HTML elements, and using the media query to override the styles applied to the table. Every <em>class<\/em> needs a name. In this case, we\u2019ve named ours <em>.container-table<\/em>. Give classes obvious names that speak to their purpose in your media query.<\/p>\n<pre><code style=\"background: #272822; margin: 0 0 25px 0; color: #efefef;\">\n\/* TYPICAL WEB DESIGN METHOD *\/\n.container-table {}\n<\/code><\/pre>\n<p>Once the class name is added to the the table tag, add the media query to HTML, along with an expression and the same class name. The expression you see below (max-width: 600px) tells the media query to apply the rules any time the screen size is less than 600px wide.<\/p>\n<pre><code style=\"background: #272822; margin: 0 0 25px 0; color: #efefef;\">\n@media screen and (max-width:600px) {\n    .container-table {\n    }\n}\n<\/code><\/pre>\n<p>Now, add style rules that adjust the value of the CSS width property for that table. The container table is fluid on any viewport narrower than 600 pixels.<\/p>\n<pre><code style=\"background: #272822; margin: 0 0 25px 0; color: #efefef;\">\n@media screen and (max-width:600px) {\n    .container-table {\n        width: 100% !important;\n    }\n}\n<\/code><\/pre>\n<p>This same approach can be used to adjust common pain points on mobile such as text, image, and button sizes. For example, to adjust the text size of copy on mobile, you can do so in a nearly identical way:<\/p>\n<pre><code style=\"background: #272822; margin: 0 0 25px 0; color: #efefef;\">\n@media screen and (max-width:600px) {\n    .mobile-text {\n        font-size: 18px !important;\n    }\n}\n<\/code><\/pre>\n<p>By targeting class names or specific elements, you can manipulate designs and make them more readable and usable on smaller devices.<\/p>\n<p>It should be noted that, in most cases, these media queries are used to override inline styles. If you are familiar with how CSS works, the cascade uses the order of declaring CSS rules to determine which styles should be rendered. Since media queries naturally live at the top of an HTML document, any inline styles applied to the content of the email will take precedence. Therefore, you need a way to override those inline styles.<\/p>\n<p>This can be accomplished using the !important declaration:<\/p>\n<pre><code style=\"background: #272822; margin: 0 0 25px 0; color: #efefef;\">td { font-size: 24px !important; font-weight: bold !important; \u00a0}<\/code><\/pre>\n<p>A lot of web designers rail against the overuse of the !important declaration but, it can be a best friend for email designers!<\/p>\n<h2>Advanced targeting<\/h2>\n<p>Many email designers will only use media queries in email to adjust styles for mobile devices, but they can be used in more advanced ways, too.<\/p>\n<p>For example, there are a lot of coding and design techniques that simply don\u2019t work in some email clients. One of the most valuable uses of media queries is to target specific email clients or platforms and progressively enhance content, so cutting-edge techniques can be used in the &#8220;right&#8221; places&#8211;without worrying about breaking the experience for everyone else.<\/p>\n<p>A great example of this is our popular email featuring a <a rel=\"noopener\" href=\"https:\/\/litmus.com\/blog\/how-to-code-html5-video-background-in-email\">background video<\/a> which we sent to promote our first <a rel=\"noopener\" href=\"https:\/\/litmus.com\/conference\">Litmus Live<\/a> event. <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/video-in-email\/\">Video in email<\/a> has long been considered the holy grail of email design. While a few clients support it, most don\u2019t. Instead of attempting to shove the video into everyone\u2019s inbox, we used media queries to target only those clients that support video in email and enhanced the campaign for that audience.<\/p>\n<figure style=\"margin: -20px -30px 15px -100px;\"><script type=\"text\/javascript\" src=\"https:\/\/litmus.com\/builder\/embed\/v1.js\"><\/script><\/figure>\n<p>Video backgrounds are only supported by certain Webkit-based browsers, namely Apple Mail and Outlook 2011 for Mac. While other email clients saw a <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/background-colors-html-email\/\">background color<\/a> and <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/the-ultimate-guide-to-background-images-in-email\/\">background image<\/a> (when supported), thanks to the following media query, the Webkit-based clients saw a full-width video playing in the background:<\/p>\n<pre><code style=\"background: #272822; margin: 0 0 25px 0; color: #efefef;\">\n@media screen and (-webkit-min-device-pixel-ratio: 0) {\n    \/* Insert styles here *\/\n}\n<\/code><\/pre>\n<p>Similar expressions can be used to target a whole host of devices based on their features. For example, if you wanted to target the iPhone X in standard view, you can use the following:<\/p>\n<pre><code style=\"background: #272822; margin: 0 0 25px 0; color: #efefef;\">\n@media screen and (device-width : 375px) and (device-height : 812px) and (-webkit-device-pixel-ratio : 3) {\n    \/* Insert styles here *\/\n}\n<\/code><\/pre>\n<p>Using media queries to target specific email clients or platforms gives email designers previously unheard of control over their designs. When combined with things like CSS animations, designers can deliver truly astounding experiences right in the inbox.<\/p>\n<h2>Which clients support media queries in email?<\/h2>\n<p>Most popular email clients now support media queries:<\/p>\n<table style=\"height: 475px;\" width=\"596\">\n<thead>\n<tr>\n<th colspan=\"2\">Media Query Support<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>iOS (iPhone\/iPad)<\/td>\n<td>Yes<\/td>\n<\/tr>\n<tr>\n<td style=\"text-align: left;\">Android 4.x native client<\/td>\n<td>Yes<\/td>\n<\/tr>\n<tr>\n<td>Android Outlook Exchange via native client<\/td>\n<td>No<\/td>\n<\/tr>\n<tr>\n<td>Android Outlook.com app<\/td>\n<td>No<\/td>\n<\/tr>\n<tr>\n<td>Android Gmail app<\/td>\n<td>No<\/td>\n<\/tr>\n<tr>\n<td>Android Yahoo! Mail app<\/td>\n<td>No<\/td>\n<\/tr>\n<tr>\n<td>Android Samsung Mail app<\/td>\n<td>Yes<\/td>\n<\/tr>\n<tr>\n<td>Gmail (Android Browser)<\/td>\n<td>No<\/td>\n<\/tr>\n<tr>\n<td>Outlook.com (Android Browser)<\/td>\n<td>No<\/td>\n<\/tr>\n<tr>\n<td>Yahoo! Mail (Android Browser)<\/td>\n<td>No<\/td>\n<\/tr>\n<tr>\n<td>Windows Phone 7<\/td>\n<td>No<\/td>\n<\/tr>\n<tr>\n<td>Windows Phone 7.5<\/td>\n<td>Yes<\/td>\n<\/tr>\n<tr>\n<td>Windows Phone 8<\/td>\n<td>No<\/td>\n<\/tr>\n<tr>\n<td>BlackBerry OS 6<\/td>\n<td>Yes<\/td>\n<\/tr>\n<tr>\n<td>BlackBerry OS 7<\/td>\n<td>Yes<\/td>\n<\/tr>\n<tr>\n<td>BlackBerry Z10<\/td>\n<td>Yes<\/td>\n<\/tr>\n<tr>\n<td>Kindle Fire native client<\/td>\n<td>Yes<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><em>This information is partially sourced from <a rel=\"noopener\" target=\"_blank\" href=\"http:\/\/www.campaignmonitor.com\/guides\/mobile\/#mobile-support\">Campaign Monitor<\/a> and <a rel=\"noopener\" target=\"_blank\" href=\"http:\/\/stylecampaign.com\/blog\/2012\/10\/responsive-email-support\/\">Style Campaign<\/a>. Information is supplemented and verified by first-hand testing when possible.<\/em><\/p>\n<p>This varying degree of support is why we typically recommend building a solid foundation for your email using HTML and inline CSS, with media queries added in to progressively enhance the design. The <a rel=\"noopener\" href=\"https:\/\/litmus.com\/blog\/understanding-responsive-and-hybrid-email-design\">hybrid approach<\/a> to building emails is the perfect foundation for when media queries aren\u2019t supported.<\/p>\n<p>If you&#8217;ve built a responsive email design using media queries, but your Litmus screenshot is showing the desktop version of the email, it could be that the particular client\/device you&#8217;re viewing doesn&#8217;t support media queries.<\/p>\n<p>When troubleshooting <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/using-responsive-email-templates\/\" target=\"_blank\" rel=\"noopener\">responsive email designs<\/a> and media queries, also keep in mind that the media query will be triggered by the viewport size of the device. Viewport sizes can vary drastically based on the physical screen size of the phone, the screen&#8217;s resolution and the pixel density or device-pixel-ratio of the device.<\/p>\n<h2>Improve your campaigns<\/h2>\n<p>Media queries allow designers to build experiences for a wider range of devices than ever before. More importantly, they allow you to fine-tune your designs for an increasingly mobile audience. As with any new technique, it\u2019s important to test your campaigns to make sure they look great.<\/p>\n\n\n\n\t<div id=\"simple-text-block-block_627ab1782a755\" class=\"block-simple-text-block alignfull bg-texture \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<div class=\"cta\">\n<table style=\"background-color: #f2f3f6\">\n<tbody>\n<tr>\n<td class=\"block-1\" style=\"padding: 20px 10px 20px 20px\"><img decoding=\"async\" class=\"alignnone size-full\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/checklist-recommended-clients.png\" width=\"601\" height=\"774\" \/><\/td>\n<td class=\"block-2\" style=\"padding: 20px 20px 20px 10px\">\n<p class=\"zero\"><strong>Ensure your designs come across right<br \/>\n<\/strong><\/p>\n<p class=\"zero\">Broken emails lead to less conversions. Preview your emails across 100+ email clients, apps, and devices to ensure an on-brand, error-free subscriber experience. Every time.<\/p>\n<p class=\"zero\"><a class=\"btn medium orange button\" rel=\"noopener\" href=\"https:\/\/www.litmus.com\/email-testing\/\" target=\"_blank\" rel=\"noopener noreferrer\">Optimize your emails<\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>&nbsp;<\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n\n\n\n\n\t<div id=\"simple-text-block-block_627ab19c2a756\" class=\"block-simple-text-block alignfull \" style=\"background-color:\">\n  <div class=\"container\">\n  \t<div class=\"row\">\n  \t\t<div class=\"col\">\n  \t\t\t<div class=\"copy\">\n  \t\t\t\t<p><em>Post was updated on May 10, 2022.<\/em><\/p>\n  \t\t\t<\/div>\n  \t\t<\/div>\n  \t<\/div>\n  <\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Email designers have long sought to build campaigns for every device. Especially today, when roughly half of all email opens happen on mobile devices, it\u2019s important to design an experience that works well across different form factors. While this used to be a difficult task (and still is for some email clients), media queries can make this task easier.<\/p>\n","protected":false},"author":3,"featured_media":4060,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"tags":[179],"blog_category":[53],"class_list":["post-4059","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-responsive-email","blog_category-tips-resources"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.5 (Yoast SEO v27.7) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Understanding Media Queries in Email - Litmus<\/title>\n<meta name=\"description\" content=\"Email designers have long sought to build campaigns for every device. Especially today, when roughly half of all email opens happen on mobile devices, it\u2019s important to design an experience that works well across different form factors. While this used to be a difficult task (and still is for some email clients), media queries can make this task easier. Learn how using media queries in emails can help fine-tune email designs for campaigns so that they are more usable across a wide range of devices.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.litmus.com\/blog\/understanding-media-queries-in-html-email\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Understanding Media Queries in Email\" \/>\n<meta property=\"og:description\" content=\"Email designers have long sought to build campaigns for every device. Especially today, when roughly half of all email opens happen on mobile devices, it\u2019s important to design an experience that works well across different form factors. While this used to be a difficult task (and still is for some email clients), media queries can make this task easier. Learn how using media queries in emails can help fine-tune email designs for campaigns so that they are more usable across a wide range of devices.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.litmus.com\/blog\/understanding-media-queries-in-html-email\" \/>\n<meta property=\"og:site_name\" content=\"Litmus\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/litmusapp\" \/>\n<meta property=\"article:published_time\" content=\"2018-02-06T00:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-27T20:29:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/understanding-media-queries-in-email.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1380\" \/>\n\t<meta property=\"og:image:height\" content=\"724\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@litmusapp\" \/>\n<meta name=\"twitter:site\" content=\"@litmusapp\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Understanding Media Queries in Email - Litmus","description":"Email designers have long sought to build campaigns for every device. Especially today, when roughly half of all email opens happen on mobile devices, it\u2019s important to design an experience that works well across different form factors. While this used to be a difficult task (and still is for some email clients), media queries can make this task easier. Learn how using media queries in emails can help fine-tune email designs for campaigns so that they are more usable across a wide range of devices.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.litmus.com\/blog\/understanding-media-queries-in-html-email","og_locale":"en_US","og_type":"article","og_title":"Understanding Media Queries in Email","og_description":"Email designers have long sought to build campaigns for every device. Especially today, when roughly half of all email opens happen on mobile devices, it\u2019s important to design an experience that works well across different form factors. While this used to be a difficult task (and still is for some email clients), media queries can make this task easier. Learn how using media queries in emails can help fine-tune email designs for campaigns so that they are more usable across a wide range of devices.","og_url":"https:\/\/www.litmus.com\/blog\/understanding-media-queries-in-html-email","og_site_name":"Litmus","article_publisher":"https:\/\/www.facebook.com\/litmusapp","article_published_time":"2018-02-06T00:00:00+00:00","article_modified_time":"2023-02-27T20:29:50+00:00","og_image":[{"width":1380,"height":724,"url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/understanding-media-queries-in-email.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_creator":"@litmusapp","twitter_site":"@litmusapp","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.litmus.com\/blog\/understanding-media-queries-in-html-email#article","isPartOf":{"@id":"https:\/\/www.litmus.com\/blog\/understanding-media-queries-in-html-email"},"author":{"name":"","@id":""},"headline":"Understanding Media Queries in Email","datePublished":"2018-02-06T00:00:00+00:00","dateModified":"2023-02-27T20:29:50+00:00","mainEntityOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/understanding-media-queries-in-html-email"},"wordCount":1394,"commentCount":0,"publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/understanding-media-queries-in-html-email#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/understanding-media-queries-in-email.png","keywords":["Responsive Email"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.litmus.com\/blog\/understanding-media-queries-in-html-email#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.litmus.com\/blog\/understanding-media-queries-in-html-email","url":"https:\/\/www.litmus.com\/blog\/understanding-media-queries-in-html-email","name":"Understanding Media Queries in Email - Litmus","isPartOf":{"@id":"https:\/\/www.litmus.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/understanding-media-queries-in-html-email#primaryimage"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/understanding-media-queries-in-html-email#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/understanding-media-queries-in-email.png","datePublished":"2018-02-06T00:00:00+00:00","dateModified":"2023-02-27T20:29:50+00:00","description":"Email designers have long sought to build campaigns for every device. Especially today, when roughly half of all email opens happen on mobile devices, it\u2019s important to design an experience that works well across different form factors. While this used to be a difficult task (and still is for some email clients), media queries can make this task easier. Learn how using media queries in emails can help fine-tune email designs for campaigns so that they are more usable across a wide range of devices.","breadcrumb":{"@id":"https:\/\/www.litmus.com\/blog\/understanding-media-queries-in-html-email#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.litmus.com\/blog\/understanding-media-queries-in-html-email"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/blog\/understanding-media-queries-in-html-email#primaryimage","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/understanding-media-queries-in-email.png","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/understanding-media-queries-in-email.png","width":1380,"height":724,"caption":"illustration of different email client environments, showing media queries in HTML email"},{"@type":"BreadcrumbList","@id":"https:\/\/www.litmus.com\/blog\/understanding-media-queries-in-html-email#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.litmus.com\/"},{"@type":"ListItem","position":2,"name":"Understanding Media Queries in Email"}]},{"@type":"WebSite","@id":"https:\/\/www.litmus.com\/#website","url":"https:\/\/www.litmus.com\/","name":"Litmus","description":"Are you getting the most out of your email marketing?","publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.litmus.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.litmus.com\/#organization","name":"Litmus Software","url":"https:\/\/www.litmus.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png","width":600,"height":314,"caption":"Litmus Software"},"image":{"@id":"https:\/\/www.litmus.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/litmusapp","https:\/\/x.com\/litmusapp"]},{"@type":"Person","@id":""}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/4059","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/comments?post=4059"}],"version-history":[{"count":15,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/4059\/revisions"}],"predecessor-version":[{"id":60995,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/4059\/revisions\/60995"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media\/4060"}],"wp:attachment":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media?parent=4059"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/tags?post=4059"},{"taxonomy":"blog_category","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/blog_category?post=4059"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}