How To Create Mobile Friendly Email Templates

Read Time: 23 mins Languages:

In this tutorial I will testify you how to create a simple responsive HTML email which will work in every email client, including the more troublesome mobile and tablet apps. It uses minimal media queries and a "fluid hybrid" arroyo to ensure maximum compatibility.

Pop HTML Email Templates on Envato Elements

If you lot're looking for a ready-made, professional person solution, grab ane of our popular HTML email templates on Envato Elements. We accept hundreds of responsive options all included with your Elements membership, with easy to customize features to get you started.

Not what you're looking for? No trouble, this tutorial will teach you how to build your own.

What Nosotros're Building

Hither'southward the responsive HTML email we'll be edifice. Feel free to fork the pen and apply it in your own piece of work.

What'south The Best Way to Make an Email Template Responsive?

The procedure of making an HTML e-mail responsive is a picayune different to making a web folio responsive.

This is because the level of back up for HTML and CSS standards varies widely across email services and apps. So while nosotros can rely on things like media queries, flexbox, grid and JavaScript on the web, they aren't always supported in HTML e-mail (and JavaScript tin can never be used in e-mail considering it would pose a security risk, and as such is always stripped out).

Some electronic mail apps don't support CSS media queries, which means we have to think carefully about how we build responsive e-mail templates. Most notable in this camp is the Gmail app for Android and iOS, which supports media queries for Gmail accounts, but when used to read emails from another service (like Yahoo or an IMAP account), media queries are not supported. The Yahoo app for Android is another customer that throws out your media queries unless you can implement a hack where yous include the entire head of your certificate twice, just this can exist stripped out past your sending platform.

These sorts of scenarios, along with the fact that Outlook for Windows just supports a subset of the CSS2.1 specification, ways it can become a bit catchy building responsive emails that render perfectly everywhere.

The practiced news is that youscan pattern and build a simple email that will look splendid in every mail app, including those that don't support media queries, by using the fluid hybrid email coding method.

Why "Fluid Hybrid" is a Great Method for Creating Responsive Emails

The term "fluid hybrid" has evolved organically over time within the email development community. It's a method whereby the responsiveness of the electronic mail is baked into the layout itself, without any need for media queries.

Information technology's known as fluid because we use a lot of percentage widths (or max-widths) for flexibility, and hybrid because nosotros combine those with fixed pixel widths (or max-widths) in order to control the size of our elements depending on the available infinite. We combine all this with the use of Ghost Tables, which is table markup hidden inside provisional comments that only Outlook on Windows will return, another aspect turning the whole approach into a bit of a hybrid between old and new. Often, successfully blending old and new to achieve results is what electronic mail evolution is all near.

For a more in-depth look at the method, or if you would similar to create a more complex layout, check out my other tutorial:

So using this method, here's what we'll be creating today:

Getting Started

Allow's showtime off with our blank canvas.

If you lot're following along from scratch, grab the files from GitHub and create a new HTML document in the same directory every bit the /images folder.

Then, paste the following into your blank certificate:

<!DOCTYPE html> <html lang="en" xmlns="https://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:function"> <head>     <meta charset="utf-8">     <meta name="viewport" content="width=device-width,initial-calibration=i">     <meta proper noun="x-apple-disable-message-reformatting">     <title></title>     <!--[if mso]>     <style>         table {border-collapse:collapse;edge-spacing:0;edge:none;margin:0;}         div, td {padding:0;}         div {margin:0 !of import;}     </fashion>     <noscript>         <xml>             <o:OfficeDocumentSettings>             <o:PixelsPerInch>96</o:PixelsPerInch>             </o:OfficeDocumentSettings>         </xml>     </noscript>     <![endif]-->     <style>         tabular array, td, div, h1, p {             font-family: Arial, sans-serif;         }     </mode> </head> <body style="margin:0;padding:0;word-spacing:normal;groundwork-color:#939297;">     <div part="article" aria-roledescription="email" lang="en" style="text-size-conform:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;background-color:#939297;">         [Scaffold goes here]     </div> </trunk> </html>

What we are creating here is our basic page with its header, doctype and trunk. There are a few meta tags that assistance ensure our electronic mail displays properly on mobile, and some CSS and PNG sizing resets for Microsoft Outlook on Windows hidden inside conditional comments (the <!--[if mso]> bits). There'southward besides a basic fashion with our font-family settings, primarily to override Gmail webmail which otherwise applies its own fonts to these elements.

Finally nosotros set upwardly our body, and well-nigh crucial hither is resetting the word-spacing, as Gmail sets this to a higher value which can upset your layouts (chapeau tip Marking Robbins). For ameliorate accessibility, we gear up a div with a function of article which we then more accurately describe as the 'electronic mail', the key surface area on the page, so that screen readers can provide clear context and navigation options to the user.

For a more detailed breakdown of all the elements here, cheque out my longer tutorial: Creating a Time to come-Proof Responsive Electronic mail Without Media Queries.

Creating an Outer Scaffold

Now let's supersede the [Scaffold goes hither] mark with the following code:

<tabular array office="presentation" mode="width:100%;border:none;border-spacing:0;">     <tr>         <td align="center" way="padding:0;">             [Ghost Table goes here]         </td>     </tr> </table>

This scaffold is necessary and then that our email will be centered across all email clients. Nosotros create a 100% broad table, and and then set the border and border-spacing to zero. Then we create a row and table cell with no padding which has align="heart" set and so that its contents volition be centered.

Note: clients will add a bit of padding to your unpadded cells if you don't set them all to null, as we have done hither. (Setting padding on a tabular array cell is the equivalent of the older method of setting cellpadding on the tabular array element, and edge-spacing assault a table is the CSS equivalent of the HTML cellspacing attribute on the table element.)

Nosotros take besides set the table role to presentation. This is very important for accessibility, as information technology ensures that screen readers will only announce the content of the tabular array, rather than the default of besides announcing the structure, i.e. which row or column is currently being read out. (That behaviour is useful for actual tabular information simply not when a table is used for layout.)

Creating A Ghost Table for Outlook on Windows

Before adding our main content container, we need to set up a Ghost Table: a rigid table with a fixed width that but renders in Outlook because it'south hidden inside some special Outlook-only conditional comments. Nosotros need to do this because our principal container is going to use the CSS max-width property, and not all versions of Outlook for Windows support it. Without max-width back up, the main container would explode to full-width when viewed in Outlook for Windows, and then we need to contain information technology.

Replace the [Ghost Table goes here] mark with the following markup:

<!--[if mso]> <table function="presentation" align="center" style="width:600px;"> <tr> <td> <![endif]-->     [Container goes hither] <!--[if mso]> </td> </tr> </table> <![endif]-->

Note that the pixel width is set using CSS inside the mode attribute, and non using as the HTML attribute, i.due east. width="600". This is to ensure that Outlook correctly calculates the width when adjusting for different DPI settings on Windows. If you use the HTML attribute, you will find that the width of your email is calculated incorrectly and information technology volition end up way besides narrow.

Now nosotros can become nearly adding our main content container, which is actually going to be a table.

Aside: Should You Use Tables or Divs for Edifice Responsive Emails?

Historically, almost all emails have been developed using tables, because this has been the only reliable way to get things rendering properly in everything from Lotus Notes to iOS Mail. The preference today is of course to use divs and mod HTML wherever possible: to reduce the corporeality of markup, improve accessibility, and generally try to move email in a more mod direction.

The continued popularity of Outlook for Windows however means that we all the same demand to strike a balance between one-time and new, since Outlook on Windows just supports the CSS2.1 specification, and oft in a rather patchy way. This is why nosotros accept to use Ghost Tables if we want to create div-based layouts, as mentioned in a higher place. But one effect with this approach is that you must double up on a lot of your CSS, since Outlook on Windows ignores or unreliably implements a lot of styling practical to divs, so y'all have to employ much of your styling separately to the Ghost Table too.

Often this doubling up doesn't matter, particularly with complex layouts, since you save a lot of code (and complexity) past using divs instead of tables, so the additional markup isn't a huge concern. Plus, your Outlook-specific CSS tin alive in the head of the e-mail, inside conditional comments, so there'southward no need apply your styles inline.

However, when creating a uncomplicated one-column email, it oftentimes feels like overkill (to me) to create and style all the divs and so have to wrap it all in a Ghost Table, where you also demand to add together the padding, margins and styling again to the different tables or cells — all this, when a single table would take washed the pull a fast one on past working for admittedly every client. Super-mod information technology may not exist, but information technology does save quite a bit on file size, which is after all a very important factor when it comes to email that I don't believe is worth sacrificing on principle. Information technology also makes the electronic mail easier to debug and maintain.

And then, every bit this e-mail template is quite simple, for simplicity's sake and to salvage on file size, I exercise indeed still utilise a single tabular array which contains all the content and styling for every client. But it is just that: a single table. The whole layout merely uses two tables and one ghost tabular array, and I am very conscientious to ensure they are all set to part="presentation" to ensure they are accessible. Notwithstanding if I needed to include any more than two or three tables, I would be starting to rethink things.

With that out of the way, let'southward become ahead and add the table in question to create our main container.

Adding Our Main Content Container

Replace the [Container goes here] marker with the following:

<table role="presentation" manner="width:94%;max-width:600px;border:none;edge-spacing:0;text-marshal:left;font-family:Arial,sans-serif;font-size:16px;line-peak:22px;color:#363636;">     [Rows become here] </table>

Here we're using the first major principle of the fluid hybrid method: creating a container that is a fluid per centum width only limited to a fixed maximum width in pixels.

Here you can see ours is set to exist 94% broad on small screens, up until in that location's enough infinite for the table to become its max-width of 600px wide. You lot tin can play around with both widths, for example if yous set the width to 100%, there will be no "padding" on the sides when viewed on a small screen.

Because this table is going to contain all our content, I have added CSS for text styling which will be inherited by the cells and paragraphs inside the tabular array. (The simply exception to this is Comcast and Libero, two webmail clients who set some default text styling at the heading and paragraph level. We're use fairly neutral typefaces here, so it'southward not noticeable in this layout, but if you lot use a webfont or more distinctive typeface, you will demand to set your font styling on your heading and paragraph tags for these clients.)

Now permit's add our first row of content.

Adding a Header with a Logo Prototype

Replacing the [Rows go here] marking, add the following table row markup:

<tr>     <td style="padding:40px 30px 30px 30px;text-align:center;font-size:24px;font-weight:bold;">         <a href="http://www.example.com/" fashion="text-decoration:none;"><img src="images/logo.png" alt="Logo"></a>     </td> </tr>

Hither nosotros have our cell with some padding, and inside is a logo wrapped in a link. On the cell I take also set the text alignment, size and weight, and so that our ALT text looks nice if people have images turned off, or they don't load.

Configuring Our Logo Image

Nosotros want the logo paradigm to be 165px wide, but besides to make sure it never takes up too much of the screen on smaller mobiles.

Here I desire it to be a maximum of 80% wide on small screens upwards to the bespeak where it reaches a maximum of 165px on larger screens. To implement all this, we tin replace the img tag with this i:

<img src="images/logo.png" width="165" alt="Logo" mode="width:165px;max-width:fourscore%;height:auto;border:none;text-ornamentation:none;color:#ffffff;">

The width="165" is very important for Outlook on Windows. For all other clients, in our style attribute, we set information technology to be 165px wide with an 80% max-width and the height set to auto and so the image retains its attribute ratio. I take also included some styling to preclude the linked ALT text rendering equally blueish with an underline.

And in that location we become! Our logo is done, and if you resize your window you'll see information technology period between eighty% wide and 165px, whichever is smaller.

(Yous may notice that on images we're setting a pixel width and a percentage max-width, which is the contrary to what we apply to our tables and divs: they go a percentage width and a pixel max-width. I've fabricated this adjustment because around mid-2021, the Outlook apps for iOS and Android stopped supporting pixel max-widths on img tags.)

Creating a Heading with Text

Now we can insert our first content row, which has a heading and some introductory text. After the closing </tr> from to a higher place we can insert a fresh row:

<tr>     <td manner="padding:30px;groundwork-colour:#ffffff;">         <h1 way="margin-top:0;margin-bottom:16px;font-size:26px;line-height:32px;font-weight:assuming;alphabetic character-spacing:-0.02em;">Welcome to our responsive email!</h1>         <p style="margin:0;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, <a href="http://world wide web.example.com/" way="color:#e50d70;text-decoration:underline;">eget accumsan dictum</a>, nisi libero ultricies ipsum, in posuere mauris neque at erat.</p>     </td> </tr>

This is a pretty elementary module: hither nosotros've just set up our jail cell'south styles, and added a heading and paragraph, containing a link. We have also added some styling to our h1 and p tags then that we can customise their margins and adjust the appearance of the heading.

Calculation a Full-Width Image

This is a uncomplicated thing, because the paradigm volition be 100% wide. Nosotros but need to fix the width="600" for Outlook on Windows to ensure it doesn't display at its native size at that place.

We tin but add the following after the </tr> in a higher place:

<tr>     <td style="padding:0;font-size:24px;line-tiptop:28px;font-weight:bold;">         <a href="http://www.example.com/" style="text-ornament:none;"><img src="images/1200x800-2.png" width="600" alt="" fashion="width:100%;height:machine;brandish:block;border:none;text-ornamentation:none;color:#363636;"></a>     </td> </tr>

Adding a Two Cavalcade Section that Stacks on Mobile

To add this layout, insert a new row after the previous closing </tr>:

<tr>     <td style="padding:35px 30px 11px 30px;font-size:0;groundwork-color:#ffffff;border-bottom:1px solid #f0f0f5;edge-color:rgba(201,201,207,.35);">         [Multiple columns go here]     </td> </tr>

You can see we're setting the font-size to zero on this prison cell. This is considering we are going to place 2 inline-block divs side-by-side inside this cell, and if there is a font size greater than nada, a gap can appear which causes them to stack.

I have likewise added a 1px bottom border on this row. I've added a fallback border of a solid #f0f0f5, but then as an enhancement I specify an RGBA color which will utilise some transparency: rgba(201,201,207,.35). This is just a trivial play a joke on to help meliorate the advent of the email when viewed in Dark Way. Outlook.com in particular doesn't conform border-color in Dark Mode, and so you can be left with a generally dark email with really bright borders. Information technology will however respect the transparency inside our RGBA setting, then the semi-transparent shade will be laid over the adjusted groundwork, resulting in less of a clash. Whatever clients that don't respect RGBA volition just fall back to the hex color.

Setting our Column Widths

I want a left-hand column of 145px, and a right-hand cavalcade of 395px. Fluid hybrid columns work in a similar way to the outer wrapper. They are ready to exist fluid (here, 100% wide) upwards to a fixed pixel max-width, and at their max-width they should comfortably sit side-by-side, giving us a multi-column layout on larger screens.

Equally soon as in that location isn't sufficient space for the columns to side side-past-side, they notwithstanding stack down on elevation of each other, and every bit the screen size becomes smaller than the column'south max-width, they remain a fluid 100% wide. In this way, nosotros have a set of columns with responsiveness baked into them, which means we aren't reliant on media queries to exercise these transformations for us. Nosotros tin can utilize media queries on top of this behaviour to further fine-melody it in clients that support them.

As with our outer container, we need to utilise a Ghost Table for Outlook on Windows, considering it doesn't support the CSS we need to achieve this. And so we need set upwardly a two column ghost table for Outlook on Windows.

Supplant the [Multiple columns go hither] marker with the following:

<!--[if mso]> <table role="presentation" width="100%"> <tr> <td style="width:145px;" align="left" valign="top"> <![endif]-->     <div grade="col-sml" mode="display:inline-cake;width:100%;max-width:145px;vertical-align:top;text-align:left;">         [Left column content]     </div> <!--[if mso]> </td> <td fashion="width:395px;padding-bottom:20px;" valign="top"> <![endif]-->     <div class="col-lge" fashion="display:inline-block;width:100%;max-width:395px;vertical-marshal:top;padding-lesser:20px;">         [Right column content]     </div> <!--[if mso]> </td> </tr> </tabular array> <![endif]-->

As mentioned in the aside higher up, y'all can see how this method requires some doubling upwards. We have the first cavalcade in our Ghost Tabular array, where I have set the width, the text alignment to left, and vertical alignment to summit, all done using a mixture of HTML and CSS. Then the div inside, div.col-sml, has all of the same settings again, this time all in the CSS.

On the right column div, div.col-lge, a similar setup follows, and you tin also see that we take to double upwardly on the padding. Outlook on Windows does non employ padding to divs reliably (and for this reason I completely disable it by setting padding:0; on all divs in the provisional <style> block for Outlook in the head of our document). Therefore nosotros need to add the aforementioned padding to both the div and the container cell in the Ghost Table. Outlook won't apply the div padding, and other clients apparently ignore the Outlook-only lawmaking. Despite all of this however, this is an extremely stable and reliable to create this kind of layout, and nosotros tin exist sure things are going to render perfectly everywhere.

Finally, the crucial ingredient on the divs is display:inline-cake, which is going to ensure the columns float next to each other, and asinline-cake divs, they volition obey thetext-marshal property on their container. You'll call back that we settext-marshal:left; on this entire table, so these divs will stick to the left when they stack.

At present our 2 cavalcade structure is done! It'southward time for some cosmetic adjustments, and to add our content.

Adding Font Styling

We need to add some font styling back to our divs, since they don't inherit it reliably across all mail clients, plus we zeroed our font size a couple of levels up. Then let's add this to the style attribute of div.col-sml:

font-family unit:Arial,sans-serif;font-size:14px;color:#363636;

Similarly, add this to the style aspect of div.col-lge:

font-family:Arial,sans-serif;font-size:16px;line-acme:22px;colour:#363636;

Now insidediv.col-sml we'll add a fluid hybrid prototype, configured much like our header logo. Replace [Left column content] with this:

<img src="images/icon.png" width="115" alt="" way="width:115px;max-width:eighty%;margin-lesser:20px;">

And inside div.col-lge we'll add some text and a link that follows Mark Robbin'southward template for links styled as buttons. Replace [Right column content] with this:

<p style="margin-top:0;margin-bottom:12px;">Nullam mollis sapien vel cursus fermentum. Integer porttitor augue id ligula facilisis pharetra. In eu ex et elit ultricies ornare nec ac ex. Mauris sapien massa, placerat non venenatis et, tincidunt eget leo.</p> <p style="margin-pinnacle:0;margin-lesser:18px;">Nam not ante risus. Vestibulum vitae eleifend nisl, quis vehicula justo. Integer viverra efficitur pharetra. Nullam eget erat nibh.</p> <p way="margin:0;"><a href="https://example.com/" style="background: #ff3884; text-decoration: none; padding: 10px 25px; color: #ffffff; border-radius: 4px; display:inline-block; mso-padding-alt:0;text-underline-color:#ff3884"><!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%;mso-text-raise:20pt">&nbsp;</i><![endif]--><span style="mso-text-heighten:10pt;font-weight:bold;">Merits yours at present</span><!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%">&nbsp;</i><![endif]--></a></p>

The whole row comes together like this:

<tr>     <td style="padding:35px 30px 11px 30px;font-size:0;background-color:#ffffff;border-bottom:1px solid #f0f0f5;border-color:rgba(201,201,207,.35);">     <!--[if mso]>     <tabular array office="presentation" width="100%">     <tr>     <td style="width:145px;" align="left" valign="acme">     <![endif]-->         <div class="col-sml" manner="display:inline-block;width:100%;max-width:145px;vertical-marshal:top;text-align:left;font-family:Arial,sans-serif;font-size:14px;color:#363636;">             <img src="images/icon.png" width="115" alt="" style="width:115px;max-width:80%;margin-lesser:20px;">         </div>     <!--[if mso]>     </td>     <td style="width:395px;padding-bottom:20px;" valign="elevation">     <![endif]-->         <div class="col-lge" fashion="display:inline-block;width:100%;max-width:395px;vertical-marshal:superlative;padding-bottom:20px;font-family:Arial,sans-serif;font-size:16px;line-height:22px;color:#363636;">             <p manner="margin-top:0;margin-bottom:12px;">Nullam mollis sapien vel cursus fermentum. Integer porttitor augue id ligula facilisis pharetra. In eu ex et elit ultricies ornare nec ac ex. Mauris sapien massa, placerat non venenatis et, tincidunt eget leo.</p>             <p style="margin-tiptop:0;margin-bottom:18px;">Nam non ante risus. Vestibulum vitae eleifend nisl, quis vehicula justo. Integer viverra efficitur pharetra. Nullam eget erat nibh.</p>             <p style="margin:0;"><a href="https://example.com/" style="background: #ff3884; text-ornamentation: none; padding: 10px 25px; color: #ffffff; edge-radius: 4px; display:inline-block; mso-padding-alt:0;text-underline-color:#ff3884"><!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%;mso-text-raise:20pt">&nbsp;</i><![endif]--><span style="mso-text-raise:10pt;font-weight:bold;">Claim yours at present</span><!--[if mso]><i style="letter-spacing: 25px;mso-font-width:-100%">&nbsp;</i><![endif]--></a></p>         </div>     <!--[if mso]>     </td>     </tr>     </table>     <![endif]-->     </td> </tr>

And there you accept it! If y'all refresh and so resize your browser, you lot will see that our columns now stack when the bachelor space becomes too small, and they return to sit side-by-side when there is enough space.

Adding a Full Width Epitome and Text with Padding

This is basically identical to our previous full width image and text modules, except that at that place is a border underneath the image, and generous padding. Since we're using 30px padding all around, from a 600px wide layout, that leaves us 540px for the image.

This entire block can sit down after the previous closing </tr>:

<tr>     <td style="padding:30px;font-size:24px;line-height:28px;font-weight:bold;background-color:#ffffff;border-bottom:1px solid #f0f0f5;border-color:rgba(201,201,207,.35);">         <a href="http://www.instance.com/" style="text-decoration:none;"><img src="images/1200x800-ane.png" width="540" alt="" mode="width:100%;meridian:auto;border:none;text-decoration:none;color:#363636;"></a>     </td> </tr> <tr>     <td manner="padding:30px;background-color:#ffffff;">         <p style="margin:0;">Duis sit amet accumsan nibh, varius tincidunt lectus. Quisque commodo, nulla air-conditioning feugiat cursus, arcu orci condimentum tellus, vel placerat libero sapien et libero. Suspendisse auctor vel orci nec finibus.</p>     </td> </tr>

Creating the Footer

Add a new row after the previous </tr>:

<tr>     <td style="padding:30px;text-align:middle;font-size:12px;background-color:#404040;colour:#cccccc;">         [Footer content goes here]     </td> </tr>

This sets up a nighttime groundwork color, besides as text alignment and a base font size that volition be inherited by our images for their ALT text.

Next, we'll add our two social icons. These are just going to be added inside a paragraph tag, with a uncomplicated space betwixt them. We will set our images to display:inline-block to ensure they obey our centered text alignment setting.

We tin replace the [Footer content goes here] marker with our paragraph containing the icons:

<p mode="margin:0 0 8px 0;"><a href="http://world wide web.facebook.com/" fashion="text-decoration:none;"><img src="images/facebook.png" width="twoscore" elevation="40" alt="f" style="brandish:inline-cake;color:#cccccc;"></a> <a href="http://www.twitter.com/" style="text-ornament:none;"><img src="images/twitter.png" width="twoscore" height="xl" alt="t" fashion="display:inline-block;colour:#cccccc;"></a></p>

Underneath this, add another paragraph with some copyright information and an unsubscribe link. We'll add the form unsub to the a tag so that we can enhance it a little bit after:

<p style="margin:0;font-size:14px;line-top:20px;">&reg; Someone, Somewhere 2021<br><a class="unsub" href="http://world wide web.example.com/" style="colour:#cccccc;text-decoration:underline;">Unsubscribe instantly</a></p>

Our Layout is Done

That's our final row, so the layout is at present consummate! If you preview yous it in your browser, everything should be looking slap-up.

At this point, we can add some media queries to enhance how our email displays on smaller devices that back up them. Since nosotros're still looking at the footer, we'll start with the unsubscribe button mentioned above.

Optimising Buttons for Mobile

We'll plow our footer link into a overnice fat push on smaller devices, since this will make it easier to tap with a finger.

If nosotros return to the <head> of the document, nosotros can insert the following lawmaking within our<manner> block underneath our font rule:

@media screen and (max-width: 530px) {     .unsub {         brandish: block;         padding: 8px;         margin-top: 14px;         border-radius: 6px;         groundwork-color: #555555;         text-ornament: none !of import;         font-weight: assuming;     } }

This media query will change the appearance of our button on screens that are narrower than 530px wide.

Now if yous refresh and brand your screen smaller, yous volition see the link turns into a nicely tappable button:

Farther Enhancements With Media Queries

We tin can now besides add together a few other enhancements to our layout. At the moment, when viewed on smaller screens, our two columns stack down to sit on top of each other, but at some sizes the text cavalcade is a lot narrower than the screen. Since most apps do back up media queries, we have a good run a risk of improving how this looks in a lot of places. Inside the same media query as above, @media screen and (max-width:530px), after the endmost } of the .unsub declaration block, we can add:

.col-lge {     max-width: 100% !of import; }

This will override the default max-width of 395px and ensure the text spans full width on all screen sizes upwards to 530px wide.

Some other thing we can fine-tune is the fact that the columns stack immediately once at that place's not plenty room for them to sit together. In reality, there might be some cases where a user's screen is a tiny bit smaller than 600px wide, perhaps on a tablet app with a fat sidebar or considering they are using Gmail webmail with a narrow preview console enabled. In these cases, we might desire to ensure the two-colum layout does display, and so we tin configure this with our CSS.

Subsequently the closing } of the media query above, add together a second ane:

@media screen and (min-width: 531px) {     .col-sml {         max-width: 27% !important;     }     .col-lge {         max-width: 73% !important;     } }

This one picks upwardly where our previous one left off – information technology went up to max 530px, then from 531px and up we'll ensure the columns always appear next by overriding our pixel max-widths and instead specifying percentages.

So there we accept it! All together, your <style> tag should expect like this:

<style>     table, td, div, h1, p {         font-family: Arial, sans-serif;     }     @media screen and (max-width: 530px) {         .unsub {             display: cake;             padding: 8px;             margin-peak: 14px;             border-radius: 6px;             background-color: #555555;             text-decoration: none !important;             font-weight: bold;         }         .col-lge {             max-width: 100% !of import;         }     }     @media screen and (min-width: 531px) {         .col-sml {             max-width: 27% !of import;         }         .col-lge {             max-width: 73% !important;         }     } </style>

If there is anything else yous want to tweak with media queries, become ahead and practise information technology here!

Test and Go!

Finally, as e'er, brand sure y'all test really well using live devices and a web preview service like Litmus or Email on Acid.

Enjoy creating responsive email templates that look great in every email client!

Download Electronic mail Templates

If yous need more than options, then one of our responsive email templates may be just what you demand. Subscribe to Envato Elements and you'll be given unlimited access to hundreds of customizable electronic mail templates, equally well as stock photography, icons, graphics, and many other creative assets for your projects.