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

---

Media queries are an efficient and dependable method for builders to code responsive e-mail designs. Getting campaigns to show in a method that works throughout cellular units with numerous display screen sizes is essential if you wish to ship an appropriate expertise to each subscriber. However this job is not at all times simple…

2023 analysis from Sinch discovered greater than 70% of shoppers within the U.S., UK, France, Germany, and Spain say they primarily use a cellular system resembling their smartphone to view emails. Nevertheless, Sinch Mailjet additionally discovered that the method of creating responsive emails can maintain senders again. Amongst e-mail builders, it is 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 must you be utilizing and why? Let’s discover the most effective 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 method 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 non-obligatory media sort (all, handheld, print, TV, and so forth) and any variety of non-obligatory expressions that restrict when the question will set off, resembling width, pixel-density or system orientation. Media queries are a part of CSS3 and allow builders to customise their content material for various presentation mediums.

On the fundamental 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 system 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 net 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 cellular viewing expertise on recipients’ smartphones. Whereas you should utilize 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 is 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 types for smaller screens when the viewport or system width is lower than a sure quantity or pixels. It’s the most width earlier than types cease being utilized. CSS types 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 cellular units, it is going to apply the types outlined within the question. The types may also be utilized if a recipient adjusts the dimensions of their browser window to lower than 600px huge.

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

Here is some pattern e-mail code exhibiting the way you’d use a max-width media question:

This will provide you with a responsive two-column format during which cellular types are displayed when the system width hits 480px or smaller. The issue, nonetheless, is that that is not a mobile-first strategy to coding. In case you’d relatively construct an optimum design for smartphones, after which have your emails adapt and develop for bigger screens, the min-width media question is a greater choice

The min-width media question

A min-width media question triggers types for desktop screens when the viewport or system is higher than the outlined variety of pixels. It’s the minimal width earlier than types begin being utilized. Here is 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 huge, it is not going to present the outlined types. On this scenario, you code for the smaller screens first and used the media question to outline desktop types.

Here is some pattern e-mail code exhibiting the way you’d use a min-width media question:

A bonus of the mobile-first or min-width strategy is that your e-mail code is a bit cleaner and extra concise. The desktop-first strategy with max-width usually 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 cellular types will switch to desktop.

Which property must you be utilizing – min-width or max-width? Check out your e-mail analytics and learn the way most subscribers open your emails. In case you’re coding emails for a business-to-consumer (B2C) model, there is a good likelihood cellular opens are considerably greater. Nevertheless, 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 strategy once you wish to goal sure cellular units with recognized widths. Here is 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 are between 600px and 400px huge. Wish to work out methods to goal a particular system primarily based on the display screen’s width? Go to CSS Methods to discover a listing of ordinary system 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 online web page will adapt to supply 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 simple breakpoints to begin from. Coding types for these particular shoppers will guarantee emails look nice on these screens. Android units, alternatively, range extensively in display screen dimension as a result of there are such a lot of completely different producers and units. Jay Oram of ActionRocket (who wrote the unique model of this information) recommends creating two to 4 breakpoints, primarily based on in style Apple units, which is able to cowl most units.

Listed below are a number of the most-common breakpoints in response to W3Schools:

Breakpoint Setting	For System
max-width 320px	Smartwatches
max-width 420px	Smaller units
max-width 600px	Telephones
min-width 600px	Tablets and Massive Telephones
min-width 768px	Tablets
min-width 992px	Laptops and Desktops
min-width 1200px	Screens, Desktops

Keep in mind, CSS guidelines that seem later within the embedded types override earlier guidelines if each have the identical specificity. This implies you may must 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 strategy:

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

It’s common to supply an e-mail with only one media question and breakpoint, selecting a breakpoint that fits your content material, resembling an e-mail with two columns aspect by aspect with a width of 300 pixels. The breakpoint could be 600 pixels – the bottom width earlier than the content material within the columns would begin to get squashed. In case you used a max-width media question, at 600 pixels the columns may stack on high of each other and develop to the system 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. Nevertheless you usually add your CSS types, you may insert your media queries. Within the instance beneath, with embedded CSS within the of the html, you may embody the media question between  tags.

Within the steps beneath, you’ll discover using the property max-device-width (or min-device-width) along with the max and min-width properties. The distinction is that, with max-device-width and min-device-width the CSS type does not change when a browser window is resized. So the responsiveness solely pertains to the system display screen dimension. Utilizing max-width and min-width, nonetheless, will lead to changes when a browser window is resized.

STEP 1

Add a category and the CSS you desire to between type tags. On this case, the category is .100pc, which has similarities to these extensively used on cellular to make tables and parts stretch to the total width of the system or containing desk.

STEP 2

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

STEP 3

Now we add !vital (an e-mail developer's magic bullet). With some e-mail shoppers needing inline types, you'll have to add !vital after the type to make sure it overwrites the inline type.

STEP 4

Add the category to the HTML ingredient:

and a particular class to focus on contained in the media queries. For instance, a two-column part may appear like this:

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 may be very choosy about what matches side-by-side and what does not.

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

When the responsive code kicks in, we'll wish 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!vital; padding:0;}	
  .middle {text-align: middle!vital;}	 
    }

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

E-mail shopper quirks and assist for media queries

Media queries are extensively supported amongst practically each trendy e-mail shopper. Take a look at CanIEmail.com to see the newest on media question assist for min-width in addition to assist for the max-width property. Probably the most notable drawback space, which you will have already guessed, is Outlook for Home windows. These desktop apps don't assist media queries.

Nevertheless, should you've take a mobile-first strategy 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 types fail, your e-mail nonetheless seems to be okay with cellular types utilized. You possibly can't say the identical about desktop types on a smartphone.

Listed below are a couple of e-mail shopper quirks to think about 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 are following swimsuit, it appears there may be now assist for one media question.

Utilizing the above instance, setting one breakpoint with a media question to tell apart between bigger (desktop) screens and cellular sizes would convey responsive e-mail assist to most variations of Outlook.

Gmail

Gmail helps media queries for system 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 choose up on any apparent errors.

Outlook Desktop

As talked about, Outlook on desktop doesn’t assist media queries, however we will use this to our benefit. By wrapping any @font-face for linking net 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. Take a look at howtotarget.e-mail for a searchable listing of the way to focus on completely 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 units which have a sure pixel density. Mixed with WebKit, this could successfully let the e-mail developer goal any WebKit units. This may be helpful when including interactive code that's recognized 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 in style with many builders, there are methods to code responsive emails with out them. Rémi Parmentier has a 2016 article during 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 strategy 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 a number of percentages and parts that may transfer and develop 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 parts, 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 may show you how to keep away from Gmail clipping if that is a priority. Extra importantly, GANGA accounts (Gmail app for non-Google Accounts), don't assist the tag.

Check your emails on cellular units earlier than you ship

Sinch E-mail on Acid exists to make the complexities of e-mail advertising a bit of simpler. We all know creating responsive e-mail campaigns may be difficult, that is why we assist advertising groups see what they're delivering earlier than anybody hits the ship button.

Our platform offers e-mail previews on greater than 100 shoppers and units. 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 every thing from accessibility and inbox show to deliverability and URL validation.

Put your finest e-mail ahead once you use Sinch E-mail on Acid to ship perfection. Get pleasure from limitless testing with each paid plan.