How Min-Width and Max-Width Media Queries Work in Responsive CSS

Media queries are an efficient and dependable manner for builders to code responsive e mail designs. Getting campaigns to show in a manner that works throughout cell gadgets with numerous display screen sizes is essential if you wish to ship a suitable expertise to each subscriber. However this job isn’t at all times straightforward…

2023 analysis from Sinch discovered greater than 70% of customers within the U.S., UK, France, Germany, and Spain say they primarily use a cell gadget equivalent to their smartphone to view emails. Nonetheless, Sinch Mailjet additionally discovered that the method of creating responsive emails can maintain senders again. Amongst e mail builders, it’s a fair greater deal. Greater than 42% of those that code say responsive e mail design is a constraint to success.

CSS media queries are used to focus on display screen sizes or resolutions in addition to particular e mail shoppers. You could have heard that there are min-width and max-width media queries. However which do you have to be utilizing and why? Let’s discover the very best methods to make use of media queries for responsive design and higher e mail growth.

What are media queries?

A media question is a CSS approach that makes use of the @media rule so as to add a block of CSS properties when sure situations are met. For instance, if the display screen dimension reaches a sure level, a media question signifies when to point out X as an alternative of Y.

A media question consists of an elective media kind (all, handheld, print, TV, and so forth) and any variety of elective expressions that restrict when the question will set off, equivalent to width, pixel-density or gadget orientation. Media queries are a part of CSS3 and allow builders to customise their content material for various presentation mediums.

On the primary degree, media queries enable an e mail developer to create responsive emails by detecting the width of the show. For responsive e mail design, coders use the min-width and max-width media queries.

You can too use media queries for different functions. That features concentrating on gadget orientation and the popular theme (darkish mode or mild mode).

How min- and max-width media queries work

How media queries operate could be a bit complicated. Let’s check out the 2 queries that are generally utilized in e mail: min-width and max-width. They’re additionally utilized in internet design to create a mobile-friendly expertise as they permit for various layouts primarily based on the viewport.

In an e mail design, for instance, chances are you’ll code a two-column format for desktop viewing, however you need the content material to stack for a greater cell viewing expertise on recipients’ smartphones. Whereas you need to use both the min-width or max-width question to make your format responsive, there’s a higher choice for mobile-first e mail coding.

That’s as a result of one choice defaults to desktop screens and the opposite prioritizes smaller screens.

The max-width media question

A max-width media question triggers kinds for smaller screens when the viewport or gadget width is lower than a sure quantity or pixels. It’s the most width earlier than kinds cease being utilized. CSS kinds are ordered from largest to smallest.

Right here is an instance of a max-width question:

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

What this question actually means is, “If [device width] is lower than or equal to 600px, then do {...}.”

So, when an e mail is seen on most cell gadgets, it’s going to apply the kinds outlined within the question. The kinds can even be utilized if a recipient adjusts the scale of their browser window to lower than 600px large.

With this method, you’re basically making your desktop screens the default and altering the format when seen on a cell gadget. It shrinks down and resizes the content material for smaller screens. For fairly a while, that is how most builders coded responsive emails.

Right here’s some pattern e mail code displaying the way you’d use a max-width media question:

<fashion>
  :root {
    color-scheme: mild darkish;
    supported-color-schemes: mild darkish;
    font-size: 16px;
    font-color: #222;
  }
 
  h2 {
    margin: 0;
  }
 
  .column {
    width: 50%;
    show: table-cell;
    padding: .5em;
  }
 
@media display screen and (max-width:480px) {
  .column {
    show: block !essential;
    width: 100% !essential;
  }
 
  .column:last-child {
    margin-top: 2em !essential;
  }
}
</fashion>

This will provide you with a responsive two-column format through which cell kinds are displayed when the gadget width hits 480px or smaller. The issue, nevertheless, is that that is not a mobile-first method to coding. Should you’d moderately construct an optimum design for smartphones, after which have your emails adapt and broaden for bigger screens, the min-width media question is a greater choice

The min-width media question

A min-width media question triggers kinds for desktop screens when the viewport or gadget is higher than the outlined variety of pixels. It’s the minimal width earlier than kinds begin being utilized. Right here’s an instance of a min-width question:

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

What this question actually means is, “If [device width] is higher than or equal to 600px, then do {...}“

So, if an e mail recipient views your marketing campaign on a smartphone with a show lower than 600 pixels large, it is not going to present the outlined kinds. On this state of affairs, you code for the smaller screens first and used the media question to outline desktop kinds.

Right here’s some pattern e mail code displaying the way you’d use a min-width media question:

<fashion>
  :root {
    color-scheme: mild darkish;
    supported-color-schemes: mild darkish;
    font-size: 16px;
    font-color: #222;
  }
 
  h2 {
    margin: 0;
  }
 
  .column:last-child {
    margin-top: 2em;
  }
 
@media display screen and (min-width:480px) {
  .column {
    width: 50%;
    show: table-cell;
    padding: .5em;
  }
  .column:last-child {
    margin-top: 0;
  }
}
</fashion>

A bonus of the mobile-first or min-width method is that your e mail code is a bit cleaner and extra concise. The desktop-first method with max-width typically requires you to override extra within the media question. Then again, with mobile-first e mail coding that makes use of the min-width property, most cell kinds will switch to desktop.

Which property do you have to be utilizing – min-width or max-width? Check out your e mail analytics and learn the way most subscribers open your emails. Should you’re coding emails for a business-to-consumer (B2C) model, there’s a great likelihood cell opens are considerably larger. Nonetheless, in case your a business-to-business (B2B) model, your contacts could also be extra prone to be opening emails on a desktop.

Combining min-width and max-width media queries

Max-width and min-width can be utilized collectively to focus on a particular vary of display screen resolutions or viewport sizes. Use this method while you need to goal sure cell gadgets with identified widths. Right here’s an instance of utilizing each min- and max-width in a media question.

@media solely display screen and (max-width: 600px) and (min-width: 400px)  {...}

The question above will set off just for screens which might be between 600px and 400px large. Wish to determine how one can goal a particular gadget primarily based on the display screen’s width? Go to CSS Methods to discover a checklist of ordinary gadget widths and the media queries to make use of.

Breakpoints for media queries

The breakpoint is the display screen width at which the design and format of an HTML e mail or an internet web page will adapt to offer an optimum viewing expertise.

Precisely what these must be set to is a matter of some debate amongst e mail builders.

iPhones and iPads present us with a couple of straightforward breakpoints to begin from. Coding kinds for these particular shoppers will guarantee emails look nice on these screens. Android gadgets, however, fluctuate extensively in display screen dimension as a result of there are such a lot of totally different producers and gadgets. Jay Oram of ActionRocket (who wrote the unique model of this information) recommends creating two to 4 breakpoints, primarily based on common Apple gadgets, which can cowl most gadgets.

Listed here are a few of the most-common breakpoints based on W3Schools:

Bear in mind, CSS guidelines that seem later within the embedded kinds override earlier guidelines if each have the identical specificity. This implies you’ll have to order media queries from both largest to smallest or vice versa – relying on whether or not you utilize min-width or max-width.

Right here is an instance order for the max-width method:

• Desktop kinds (not in a media question)
• Pill kinds (max-width: 768px)
• Cell kinds (max-width: 414px)

It is not uncommon to supply an e mail with only one media question and breakpoint, selecting a breakpoint that fits your content material, equivalent to an e mail with two columns aspect by aspect with a width of 300 pixels. The breakpoint can be 600 pixels – the bottom width earlier than the content material within the columns would begin to get squashed. Should you used a max-width media question, at 600 pixels the columns might stack on prime of each other and broaden to the gadget width.

4 steps for coding emails with media queries

Utilizing media queries in your emails can actually assist with concentrating on and making your emails responsive. Nonetheless you usually add your CSS kinds, you possibly can insert your media queries. Within the instance beneath, with embedded CSS within the <head> of the html, you possibly can embody the media question between <fashion></fashion> tags.

Within the steps beneath, you’ll discover the usage of the property max-device-width (or min-device-width) along with the max and min-width properties. The distinction is that

STEP 1

Add a category and the CSS you prefer to between fashion tags. On this case, the category is .100pc, which has similarities to these extensively used on cell to make tables and components stretch to the total width of the gadget or containing desk.

<fashion>
.100pc {
Width: 100%;
}
</fashion>

STEP 2

We now add the media question across the class. On this case, for gadgets with a max display screen dimension of 640px.

<fashion>
@media display screen and (max-device-width:640px), display screen and (max-width:640px) {
.100pc {
Width: 100%;
}
}
</fashion>

STEP 3

Now we add !essential (an e mail developer’s magic bullet). With some e mail shoppers needing inline kinds, you’ll have to add !essential after the fashion to make sure it overwrites the inline fashion.

<fashion>
@media display screen and (max-device-width:640px), display screen and (max-width:640px) {
.100pc {
Width: 100%!essential;
}
}
</fashion>

STEP 4

Add the category to the HTML component:

<desk width=“640” fashion=“width: 640px;” function="presentation" border="0" cellpadding="0" cellspacing="0" class="100pc”>

Coding for 2 columns with media queries

When coding an e mail to be responsive utilizing media queries, a standard approach is to create tables with align = "left" and a particular class to focus on contained in the media queries. For instance, a two-column part would possibly appear to be this:

<desk border="0" cellpadding="0" cellspacing="0" align="heart" class="deviceWidth">
	<tr>
		<td fashion="padding:10px 0">
            <desk align="left" width="49%" border="0" class="deviceWidth">
                <tr>
                    <td>
						
                    </td>
                </tr>
            </desk>
            <desk align="left" width="49%" border="0" class="deviceWidth">
                <tr>
                    <td>

                    </td>
                </tr>
            </desk>
        </td>
    </tr>
</desk>

Every of the tables with 49% width can match aspect by aspect when on desktop view. 49% is used as an alternative of fifty% as a result of Outlook might be very choosy about what matches side-by-side and what doesn’t.

You may make 50% width match if you happen to set your whole kinds good (no border, padding, and many others.). You may make a three-column part utilizing comparable code, however use three tables set to 32% width as an alternative.

When the responsive code kicks in, we’ll need to make these content material blocks 100% width for telephones in order that they fill the entire display screen. This may be achieved for many telephones with a single media question:

@media solely display screen and (max-width: 414px) {
  .deviceWidth {width:280px!essential; padding:0;}	
  .heart {text-align: heart!essential;}	 
    }

You possibly can proceed so as to add media queries with particular kinds to cowl as many alternative display screen sizes as you’d like. You must also add code to your media queries to optimize font-size and line-height for every display screen dimension, bettering readability in your subscribers.

E mail consumer quirks and help for media queries

Media queries are extensively supported amongst almost each trendy e mail consumer. Try CanIEmail.com to see the newest on media question help for min-width in addition to help for the max-width property. Probably the most notable downside space, which you will have already guessed, is Outlook for Home windows. These desktop apps don’t help media queries.

Nonetheless, if you happen to’ve take a mobile-first method and use a min-width property, you’r emails ought to look discover on desktop model of Outlook. The great factor about mobile-first e mail coding is that, when desktop kinds fail, your e mail nonetheless seems okay with cell kinds utilized. You possibly can’t say the identical about desktop kinds on a smartphone.

Listed here are a couple of e mail consumer quirks to contemplate when utilizing media queries for responsive layouts:

Outlook.com

As highlighted by Rémi Parmentier, with previous updates to Outlook.com and the Outlook apps which might be following swimsuit, it appears there’s now help for one media question.

Utilizing the above instance, setting one breakpoint with a media question to differentiate between bigger (desktop) screens and cell sizes would convey responsive e mail help to most variations of Outlook.

Gmail

Gmail helps media queries for gadget width, however it’s particularly strict with CSS. One misplaced curly bracket can render the whole thing being ignored. Utilizing a CSS validator such because the official w3.org validator will decide up on any apparent errors.

Outlook Desktop

As talked about, Outlook on desktop doesn’t help media queries, however we are able to use this to our benefit. By wrapping any @font-face for linking internet fonts in a media question, they are going to be ignored and cease Outlook rendering fonts as Occasions New Roman:

@media {@font-face…}

Utilizing media queries to focus on e mail shoppers

We are able to additionally goal particular shoppers utilizing media queries, and with updates, developer discoveries and documentation, extra are being found continuously. Try howtotarget.e mail for a searchable checklist of how to focus on totally different e mail shoppers.

Gmail on Cell (webmail and app)

@media display screen and (max-width: 480px) {
u + .physique .foo {…}
}

Outlook on Android

@media (min-resolution: 1dpi) {
physique[data-outlook-cycle] .foo {…}
}

Yahoo! Mail

@media display screen yahoo{ … }

WebKit e mail shoppers with pixel-density

This media question can be utilized to focus on solely gadgets which have a sure pixel density. Mixed with WebKit, this may successfully let the e-mail developer goal any WebKit gadgets. This may be helpful when including interactive code that’s identified solely to work in sure shoppers:

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

Are you able to code responsive emails with out media queries?

Whereas media queries are efficient and common with many builders, there are methods to code responsive emails with out them. Rémi Parmentier has a 2016 article through which he used the CSS calc() operate together with min-width and max-width properties.

One other nice responsive e mail tutorial comes from Nicole Merlin, who has one other method for coding responsive emails with out media queries. Nicole makes use of the fluid-hybrid methodology for responsive emails:

“The fluid half refers to the truth that we use plenty of percentages and components that may transfer and broaden to suit the house they’re given. The hybrid half is as a result of we additionally use max-width to constrain these free-flowing components, and prohibit the general dimension of our e mail on bigger display screen sizes.”

Nicole Merlin, E mail Developer

One potential good thing about creating emails with out media queries is that it could require a bit much less code, which might enable you to keep away from Gmail clipping if that’s a priority. Extra importantly, GANGA accounts (Gmail app for non-Google Accounts), don’t help the <fashion> tag.

Check your emails on cell gadgets earlier than you ship

Sinch E mail on Acid exists to make the complexities of e mail advertising and marketing slightly simpler. We all know creating responsive e mail campaigns might be difficult, that’s why we assist advertising and marketing groups see what they’re delivering earlier than anybody hits the ship button.

Our platform supplies e mail previews on greater than 100 shoppers and gadgets. That features darkish mode previews and screenshots of how your e mail renders on the newest smartphones – like the brand new iPhone 15. Along with previewing your campaigns, e mail entrepreneurs additionally use Sinch E mail on Acid for high quality assurance on the whole lot from accessibility and inbox show to deliverability and URL validation.

Put your finest e mail ahead while you use Sinch E mail on Acid to ship perfection. Take pleasure in limitless testing with each paid plan.

Particular thanks goes out to Jay Oram who wrote the unique model of this text in 2019. A lot of Jay’s code and recommendation is included on this model. He’s the lead developer on the UK-based digital company, ActionRocket.

Writer: The E mail on Acid Group

The E mail on Acid content material crew is made up of digital entrepreneurs, content material creators, and straight-up e mail geeks.

Join with us on LinkedIn, comply with us on Fb, and tweet at @EmailonAcid on Twitter for extra candy stuff and nice convos on e mail advertising and marketing.

Writer: The E mail on Acid Group

The E mail on Acid content material crew is made up of digital entrepreneurs, content material creators, and straight-up e mail geeks.

Join with us on LinkedIn, comply with us on Fb, and tweet at @EmailonAcid on Twitter for extra candy stuff and nice convos on e mail advertising and marketing.