How To Make Html Email Template Word

Read Time: 23 mins Languages:

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

Popular HTML Email Templates on Envato Elements

If you're looking for a fix-fabricated, professional person solution, grab one of our pop HTML email templates on Envato Elements. We have hundreds of responsive options all included with your Elements membership, with easy to customize features to become you started.

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

What Nosotros're Building

Here's the responsive HTML electronic mail we'll be building. Feel complimentary to fork the pen and use it in your ain piece of work.

What's The All-time Way to Brand an Email Template Responsive?

The process of making an HTML email responsive is a petty unlike to making a web page responsive.

This is because the level of support for HTML and CSS standards varies widely beyond email services and apps. So while we tin can rely on things similar media queries, flexbox, grid and JavaScript on the web, they aren't always supported in HTML email (and JavaScript tin can never be used in email because it would pose a security run a risk, and every bit such is ever stripped out).

Some email apps don't support CSS media queries, which means we take to think carefully about how nosotros build responsive email templates. About notable in this military 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 client that throws out your media queries unless you tin implement a hack where yous include the entire head of your certificate twice, but this can exist stripped out by your sending platform.

These sorts of scenarios, forth with the fact that Outlook for Windows just supports a subset of the CSS2.1 specification, means information technology tin can get a flake catchy edifice responsive emails that render perfectly everywhere.

The good news is that you lotcan pattern and build a uncomplicated email that will expect excellent 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 inside the e-mail development community. It'southward a method whereby the responsiveness of the email is broiled into the layout itself, without any need for media queries.

It's known as fluid because we apply a lot of percentage widths (or max-widths) for flexibility, and hybrid because nosotros combine those with stock-still pixel widths (or max-widths) in order to control the size of our elements depending on the bachelor space. We combine all this with the employ of Ghost Tables, which is table markup hidden inside conditional comments that only Outlook on Windows will render, some other attribute turning the whole arroyo into a chip of a hybrid between old and new. Often, successfully blending onetime and new to achieve results is what email development is all nigh.

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

So using this method, hither's what nosotros'll be creating today:

Getting Started

Let's start off with our blank canvas.

If you're post-obit along from scratch, grab the files from GitHub and create a new HTML document in the same directory as the /images folder.

Then, paste the following into your bare certificate:

<!DOCTYPE html> <html lang="en" xmlns="https://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:role:office"> <head>     <meta charset="utf-8">     <meta name="viewport" content="width=device-width,initial-scale=1">     <meta name="x-apple-disable-message-reformatting">     <title></title>     <!--[if mso]>     <style>         table {edge-collapse:plummet;border-spacing:0;border:none;margin:0;}         div, td {padding:0;}         div {margin:0 !important;}     </way>     <noscript>         <xml>             <o:OfficeDocumentSettings>             <o:PixelsPerInch>96</o:PixelsPerInch>             </o:OfficeDocumentSettings>         </xml>     </noscript>     <![endif]-->     <mode>         table, td, div, h1, p {             font-family: Arial, sans-serif;         }     </way> </head> <body mode="margin:0;padding:0;give-and-take-spacing:normal;background-color:#939297;">     <div function="article" aria-roledescription="email" lang="en" style="text-size-accommodate:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;background-color:#939297;">         [Scaffold goes here]     </div> </torso> </html>

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

Finally nosotros fix upwards our body, and nearly crucial here is resetting the word-spacing, as Gmail sets this to a higher value which tin can upset your layouts (hat tip Marker Robbins). For better accessibility, we ready a div with a role of article which we then more accurately describe as the 'email', the fundamental surface area on the page, and then that screen readers can provide articulate context and navigation options to the user.

For a more detailed breakdown of all the elements here, check out my longer tutorial: Creating a Future-Proof Responsive Email Without Media Queries.

Creating an Outer Scaffold

Now let'south replace the [Scaffold goes here] marking with the following code:

<table role="presentation" style="width:100%;border:none;border-spacing:0;">     <tr>         <td align="centre" mode="padding:0;">             [Ghost Tabular array goes here]         </td>     </tr> </table>

This scaffold is necessary so that our e-mail volition be centered across all email clients. Nosotros create a 100% wide table, and and then gear up the border and border-spacing to zero. Then we create a row and table prison cell with no padding which has align="eye" gear up so that its contents volition exist centered.

Annotation: clients will add together a fleck of padding to your unpadded cells if you don't set them all to zero, equally we take washed here. (Setting padding on a tabular array jail cell is the equivalent of the older method of setting cellpadding on the table element, and border-spacing set on a table is the CSS equivalent of the HTML cellspacing attribute on the tabular array element.)

We accept also set the table part to presentation. This is very of import for accessibility, equally it ensures that screen readers will just announce the content of the table, rather than the default of likewise announcing the structure, i.e. which row or column is currently being read out. (That behaviour is useful for actual tabular data but not when a table is used for layout.)

Creating A Ghost Table for Outlook on Windows

Before adding our master content container, we demand to fix a Ghost Table: a rigid table with a fixed width that but renders in Outlook because it's hidden inside some special Outlook-simply conditional comments. Nosotros need to exercise this considering our primary container is going to use the CSS max-width property, and not all versions of Outlook for Windows back up it. Without max-width back up, the main container would explode to full-width when viewed in Outlook for Windows, so nosotros demand to contain information technology.

Supervene upon the [Ghost Table goes here] marker with the following markup:

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

Note that the pixel width is set up using CSS inside the manner attribute, and not using as the HTML attribute, i.east. width="600". This is to ensure that Outlook correctly calculates the width when adjusting for different DPI settings on Windows. If y'all use the HTML attribute, you will find that the width of your email is calculated incorrectly and it volition finish up way too narrow.

Now we can go nigh adding our main content container, which is really going to be a table.

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

Historically, most all emails have been developed using tables, because this has been the only reliable fashion to get things rendering properly in everything from Lotus Notes to iOS Mail service. The preference today is of course to use divs and modernistic HTML wherever possible: to reduce the corporeality of markup, improve accessibility, and generally try to movement e-mail in a more mod management.

The continued popularity of Outlook for Windows nonetheless ways that we notwithstanding need to strike a balance between quondam and new, since Outlook on Windows only supports the CSS2.1 specification, and often in a rather patchy way. This is why nosotros have to utilise Ghost Tables if we desire to create div-based layouts, equally mentioned above. Only one issue with this arroyo is that you must double upwardly on a lot of your CSS, since Outlook on Windows ignores or unreliably implements a lot of styling applied to divs, so you have to use much of your styling separately to the Ghost Table too.

Oftentimes this doubling up doesn't matter, peculiarly with circuitous layouts, since you save a lot of code (and complexity) by using divs instead of tables, so the boosted markup isn't a huge concern. Plus, your Outlook-specific CSS can live in the head of the email, inside conditional comments, then there's no demand employ your styles inline.

However, when creating a simple ane-column email, information technology often feels like overkill (to me) to create and style all the divs and and so have to wrap it all in a Ghost Tabular array, where you besides demand to add together the padding, margins and styling again to the different tables or cells — all this, when a unmarried table would have done the play tricks by working for absolutely every client. Super-modern it may not exist, simply it does salve quite a bit on file size, which is afterwards all a very of import gene when it comes to email that I don't believe is worth sacrificing on principle. It besides makes the email easier to debug and maintain.

So, as this email template is quite simple, for simplicity'south sake and to save on file size, I do indeed still use a unmarried tabular array which contains all the content and styling for every client. Merely it is only that: a single tabular array. The whole layout only uses ii tables and one ghost table, and I am very conscientious to ensure they are all set to function="presentation" to ensure they are accessible. However if I needed to include any more than ii or 3 tables, I would be starting to rethink things.

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

Adding Our Principal Content Container

Supercede the [Container goes here] marker with the post-obit:

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

Here we're using the beginning major principle of the fluid hybrid method: creating a container that is a fluid pct width just limited to a fixed maximum width in pixels.

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

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

At present allow's add our offset row of content.

Adding a Header with a Logo Paradigm

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

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

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

Configuring Our Logo Image

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

Here I want it to be a maximum of eighty% wide on pocket-sized screens up to the point where it reaches a maximum of 165px on larger screens. To implement all this, we can supervene upon the img tag with this one:

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

The width="165" is very of import for Outlook on Windows. For all other clients, in our mode attribute, we fix it to be 165px broad with an lxxx% max-width and the height set to auto and then the image retains its attribute ratio. I have as well included some styling to prevent the linked ALT text rendering every bit blue with an underline.

And there nosotros go! Our logo is washed, and if you lot resize your window you'll see it flow between 80% wide and 165px, whichever is smaller.

(You lot may detect that on images we're setting a pixel width and a percent max-width, which is the opposite to what we apply to our tables and divs: they go a pct width and a pixel max-width. I've made this adjustment because effectually 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. Later the endmost </tr> from above we can insert a fresh row:

<tr>     <td fashion="padding:30px;background-colour:#ffffff;">         <h1 way="margin-top:0;margin-bottom:16px;font-size:26px;line-superlative:32px;font-weight:bold;letter-spacing:-0.02em;">Welcome to our responsive email!</h1>         <p style="margin:0;">Lorem ipsum dolor sit down amet, consectetur adipiscing elit. In tempus adipiscing felis, sit down amet blandit ipsum volutpat sed. Morbi porttitor, <a href="http://www.example.com/" style="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 simple module: here nosotros've just set our cell's styles, and added a heading and paragraph, containing a link. We have also added some styling to our h1 and p tags so that we tin can customise their margins and adjust the appearance of the heading.

Adding a Full-Width Epitome

This is a elementary matter, because the paradigm will be 100% wide. We just need to set the width="600" for Outlook on Windows to ensure it doesn't display at its native size there.

We tin can simply add together the following after the </tr> above:

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

Calculation a Two Column 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;background-color:#ffffff;border-bottom:1px solid #f0f0f5;border-color:rgba(201,201,207,.35);">         [Multiple columns get here]     </td> </tr>

You tin see we're setting the font-size to aught on this cell. This is considering nosotros are going to place two inline-block divs side-by-side inside this jail cell, and if at that place is a font size greater than cypher, a gap can appear which causes them to stack.

I have also added a 1px bottom border on this row. I've added a fallback edge of a solid #f0f0f5, only then as an enhancement I specify an RGBA colour which volition use some transparency: rgba(201,201,207,.35). This is just a little fob to aid improve the appearance of the electronic mail when viewed in Nighttime Mode. Outlook.com in detail doesn't adjust edge-color in Night Manner, then you lot tin can be left with a by and large dark email with really vivid borders. It volition still respect the transparency within our RGBA setting, and so the semi-transparent shade will exist laid over the adapted groundwork, resulting in less of a disharmonism. Whatsoever clients that don't respect RGBA will only autumn back to the hex colour.

Setting our Cavalcade Widths

I desire a left-hand column of 145px, and a correct-hand column of 395px. Fluid hybrid columns work in a similar way to the outer wrapper. They are ready to be fluid (here, 100% broad) 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.

Every bit soon as at that place isn't sufficient infinite for the columns to side side-by-side, they yet stack down on top of each other, and as the screen size becomes smaller than the column'southward max-width, they remain a fluid 100% wide. In this way, we have a set of columns with responsiveness broiled into them, which means we aren't reliant on media queries to do these transformations for us. We can employ media queries on height of this behaviour to further fine-melody it in clients that support them.

As with our outer container, nosotros need to utilize a Ghost Tabular array for Outlook on Windows, because it doesn't support the CSS we need to accomplish this. And then we need ready a two column ghost table for Outlook on Windows.

Replace the [Multiple columns go here] marker with the following:

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

Every bit mentioned in the bated above, you can see how this method requires some doubling up. We have the first column in our Ghost Tabular array, where I accept set the width, the text alignment to left, and vertical alignment to acme, all done using a mixture of HTML and CSS. And so the div within, 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 yous tin can also meet that we accept to double up on the padding. Outlook on Windows does non apply padding to divs reliably (and for this reason I completely disable it by setting padding:0; on all divs in the conditional <style> cake for Outlook in the head of our document). Therefore nosotros demand to add the aforementioned padding to both the div and the container cell in the Ghost Table. Outlook won't use the div padding, and other clients obviously ignore the Outlook-but code. Despite all of this however, this is an extremely stable and reliable to create this kind of layout, and we can be certain 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 adjacent to each other, and asinline-block divs, they volition obey thetext-align property on their container. You'll recall that we settext-marshal:left; on this entire table, so these divs will stick to the left when they stack.

Now our two column construction is done! Information technology's fourth dimension for some corrective adjustments, and to add our content.

Adding Font Styling

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

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

Similarly, add together this to the fashion attribute of div.col-lge:

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

Now insidediv.col-sml nosotros'll add together a fluid hybrid image, 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:80%;margin-bottom:20px;">

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

<p mode="margin-top:0;margin-lesser: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 manner="margin-top: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="groundwork: #ff3884; text-decoration: none; padding: 10px 25px; color: #ffffff; border-radius: 4px; brandish:inline-cake; mso-padding-alt:0;text-underline-color:#ff3884"><!--[if mso]><i mode="alphabetic character-spacing: 25px;mso-font-width:-100%;mso-text-enhance:20pt">&nbsp;</i><![endif]--><bridge style="mso-text-raise:10pt;font-weight:bold;">Claim yours now</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 way="padding:35px 30px 11px 30px;font-size:0;background-colour:#ffffff;border-bottom:1px solid #f0f0f5;border-color:rgba(201,201,207,.35);">     <!--[if mso]>     <table role="presentation" width="100%">     <tr>     <td mode="width:145px;" align="left" valign="top">     <![endif]-->         <div class="col-sml" way="display:inline-cake;width:100%;max-width:145px;vertical-align:meridian;text-marshal: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-bottom:20px;">         </div>     <!--[if mso]>     </td>     <td style="width:395px;padding-bottom:20px;" valign="summit">     <![endif]-->         <div class="col-lge" mode="brandish:inline-cake;width:100%;max-width:395px;vertical-marshal:meridian;padding-bottom:20px;font-family:Arial,sans-serif;font-size:16px;line-meridian:22px;color:#363636;">             <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-height:0;margin-bottom:18px;">Nam not dues risus. Vestibulum vitae eleifend nisl, quis vehicula justo. Integer viverra efficitur pharetra. Nullam eget erat nibh.</p>             <p style="margin:0;"><a href="https://instance.com/" style="background: #ff3884; text-decoration: none; padding: 10px 25px; color: #ffffff; border-radius: 4px; display:inline-block; mso-padding-alt:0;text-underline-colour:#ff3884"><!--[if mso]><i mode="letter-spacing: 25px;mso-font-width:-100%;mso-text-heighten:20pt">&nbsp;</i><![endif]--><span way="mso-text-enhance: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 take information technology! If you refresh so resize your browser, yous will see that our columns now stack when the available space becomes too small, and they return to sit side-by-side when in that location is enough space.

Adding a Full Width Image and Text with Padding

This is basically identical to our previous full width epitome and text modules, except that in that location is a border underneath the paradigm, and generous padding. Since we're using 30px padding all effectually, from a 600px wide layout, that leaves usa 540px for the image.

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

<tr>     <td style="padding:30px;font-size:24px;line-summit:28px;font-weight:assuming;background-color:#ffffff;border-bottom:1px solid #f0f0f5;border-colour:rgba(201,201,207,.35);">         <a href="http://www.example.com/" style="text-ornamentation:none;"><img src="images/1200x800-i.png" width="540" alt="" style="width:100%;acme:auto;edge:none;text-decoration:none;color:#363636;"></a>     </td> </tr> <tr>     <td fashion="padding:30px;groundwork-color:#ffffff;">         <p fashion="margin:0;">Duis sit amet accumsan nibh, varius tincidunt lectus. Quisque commodo, nulla ac 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 together a new row after the previous </tr>:

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

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

Next, we'll add our ii social icons. These are just going to exist added within a paragraph tag, with a simple infinite between them. Nosotros volition set our images to brandish:inline-cake to ensure they obey our centered text alignment setting.

Nosotros can replace the [Footer content goes here] marker with our paragraph containing the icons:

<p way="margin:0 0 8px 0;"><a href="http://www.facebook.com/" style="text-decoration:none;"><img src="images/facebook.png" width="forty" height="xl" alt="f" manner="brandish:inline-block;color:#cccccc;"></a> <a href="http://www.twitter.com/" style="text-decoration:none;"><img src="images/twitter.png" width="40" superlative="twoscore" alt="t" style="brandish:inline-block;color:#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 and then that we can enhance it a petty scrap subsequently:

<p manner="margin:0;font-size:14px;line-height: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 now complete! If y'all preview you it in your browser, everything should exist looking bully.

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

Optimising Buttons for Mobile

We'll turn our footer link into a nice fat push on smaller devices, since this volition brand it easier to tap with a finger.

If nosotros render to the <head> of the document, we can insert the post-obit code within our<style> block underneath our font rule:

@media screen and (max-width: 530px) {     .unsub {         display: block;         padding: 8px;         margin-top: 14px;         border-radius: 6px;         background-color: #555555;         text-decoration: none !important;         font-weight: bold;     } }

This media query volition modify the advent of our button on screens that are narrower than 530px broad.

Now if y'all refresh and brand your screen smaller, you will run into the link turns into a nicely tappable push button:

Further Enhancements With Media Queries

We tin now as well add a few other enhancements to our layout. At the moment, when viewed on smaller screens, our two columns stack downward to sit on top of each other, but at some sizes the text column is a lot narrower than the screen. Since most apps practice support media queries, we accept a good chance of improving how this looks in a lot of places. Inside the same media query as higher up, @media screen and (max-width:530px), later on the closing } of the .unsub proclamation block, we can add:

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

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

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

Subsequently the closing } of the media query in a higher place, add a second one:

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

This one picks up where our previous 1 left off – it went upwardly to max 530px, and then from 531px and upward nosotros'll ensure the columns e'er announced adjacent past overriding our pixel max-widths and instead specifying percentages.

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

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

If there is annihilation else you want to tweak with media queries, go ahead and do information technology here!

Test and Go!

Finally, equally always, make sure you exam really well using live devices and a web preview service like Litmus or E-mail on Acid.

Relish creating responsive e-mail templates that wait slap-up in every electronic mail client!

Download E-mail Templates

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