Inline CSS, @media tag solution for an email template

inline media query email
responsive email without media queries
gmail media queries not working
inline css responsive email
outlook media queries
mailchimp media queries
media queries not working html email
email media

For an email template I want an output like this On Wide Screen

but on small screen like mobile or @media (max-width: 768px) I want output like this

to achieve this in internal CSS I used bootstrap

<div class="col-xs-6 col-sm-4">
    <img src="http://icons.iconarchive.com/icons/mahm0udwally/all-flat/256/User-icon.png" alt="img1" class="img-thumbnail" />
</div>

but I want to do it using Inline CSS, the real problem is how can I use styles of both col-xs-6 and col-sm-4 in one single tag?


With Internal CSS and With Inline CSS

PS: @media tags are not allowed in Inline CSS. Its an email template that's why using inline CSS is necessary.

Use display:inline-block inside text-align:center

<div style="text-align:center">
     <img style= "width:100px;display:inline-block" >
    <img style= "width:100px;display:inline-block">
    <img style= "width:100px;display:inline-block">
</div>

https://jsfiddle.net/70qfn3d8/

Understanding Media Queries in HTML Email, Especially today, when roughly half of all email opens happen on mobile Solutions. Email Media queries are a component of cascading style sheets (​CSS), the in most cases, we are using media queries to override inline styles. Kickstart your next campaign with one of Litmus' pre-tested templates. Some email clients strip out your email's styles unless they are written inline with style tags. Here's what the inliner does: Inlining CSS: All of your CSS is embedded directly into the HTML as style attributes on each tag. Positioning media query CSS: CSS inside a @media block can't be inlined, so it's put in a <style> tag.

Solved by using min-length external div and width:33.33333333%; min-width: 92px;display:inline-block on internal images.

demo https://jsfiddle.net/70qfn3d8/4/

<div style="min-width: 190px;">
     <div style="text-align:center">
          <img style= "-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;max-width: 170px !important; border:1px solid #ddd;vertical-align:middle;display:inline-block;max-width:100%;height:auto;padding:4px;line-height:1.42857143;background-color:#fff;border-radius:4px;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;min-height:1px;padding-right:10px;padding-left:10px;width:33.33333333%; min-width: 92px;display:inline-block" src ="http://icons.iconarchive.com/icons/mahm0udwally/all-flat/256/User-icon.png">
          <img style= "-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;max-width: 170px !important; border:1px solid #ddd;vertical-align:middle;display:inline-block;max-width:100%;height:auto;padding:4px;line-height:1.42857143;background-color:#fff;border-radius:4px;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;min-height:1px;padding-right:10px;padding-left:10px;width:33.33333333%; min-width: 92px;display:inline-block" src ="http://icons.iconarchive.com/icons/mahm0udwally/all-flat/256/User-icon.png">
          <img style= "-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;max-width: 170px !important; border:1px solid #ddd;vertical-align:middle;display:inline-block;max-width:100%;height:auto;padding:4px;line-height:1.42857143;background-color:#fff;border-radius:4px;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;min-height:1px;padding-right:10px;padding-left:10px;width:33.33333333%; min-width: 92px;display:inline-block" src ="http://icons.iconarchive.com/icons/mahm0udwally/all-flat/256/User-icon.png">
     </div>
</div>

How to Use Email Media Queries, Learn how to use email media queries to create responsive email for different With this code, all the CSS within the query will take effect if the width is less than If you'd like to start working with a responsive template, we have a free one industry news, and solutions to most annoying email client bugs. So, Today I am sharing an HTML Email Template With Inline CSS. In other words, A Stylish Newsletter Template With Images like an infographic. I am using inline CSS because most of the email clients prefer inline CSS. Inline CSS is safest when it comes to rendering compatibility across the different email clients.

This solution is based on CSS. JavaScript will not work in email as it is stripped out and disabled by most email clients.

This answer is based on using the email template, Cerberus. Although you could use it on any responsive modern email template, I suppose.

What you will need is several style sheet classes in a @media query, a table to act as a container, then a three column table.

Style Sheet:

<style>
@media screen and (max-width: 600px) {
    .email-container {
        width: 100% !important;
        margin: auto !important;
    }
    .stack-column-center {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        direction: ltr !important;
        float: left !important;
    }
    .stack-column-center-50 {
        width: 50% !important;
        max-width: 50% !important;
        direction: ltr !important;
        display: inline-block;
    }
}
</style>

HTML Code:

<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="600" style="margin: 0 auto;" class="email-container">
  <tr>
    <td valign="top" style="padding: 10px; background-color: #ffffff;">
        <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="outline: 1px solid #f00;">
            <tr>
                <!-- Column : BEGIN -->
                <td width="33.33%" class="stack-column-center-50">
                    <table role="presentation" cellspacing="0" cellpadding="0" border="0">
                        <tr>
                            <td style="padding: 10px; text-align: center">
                                <img src="https://via.placeholder.com/170" width="170" height="170" alt="alt_text" border="0" class="fluid" style="height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555;">
                            </td>
                        </tr>
                        <tr>
                            <td style="font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow">
                                <p style="margin: 0;"><strong>Column 1</strong><br />Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
                            </td>
                        </tr>
                    </table>
                </td>
                <!-- Column : END -->
                <!-- Column : BEGIN -->
                <td width="33.33%" class="stack-column-center-50">
                    <table role="presentation" cellspacing="0" cellpadding="0" border="0">
                        <tr>
                            <td style="padding: 10px; text-align: center">
                                <img src="https://via.placeholder.com/170" width="170" height="170" alt="alt_text" border="0" class="fluid" style="height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555;">
                            </td>
                        </tr>
                        <tr>
                            <td style="font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow">
                                <p style="margin: 0;"><strong>Column 2</strong><br />Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
                            </td>
                        </tr>
                    </table>
                </td>
                <!-- Column : END -->
                <!-- Column : BEGIN -->
                <td width="33.33%" class="stack-column-center">
                    <table role="presentation" cellspacing="0" cellpadding="0" border="0">
                        <tr>
                            <td style="padding: 10px; text-align: center">
                                <img src="https://via.placeholder.com/170" width="170" height="170" alt="alt_text" border="0" class="fluid" style="height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555;">
                            </td>
                        </tr>
                        <tr>
                            <td style="font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow">
                                <p style="margin: 0;"><strong>Column 3</strong><br />Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
                            </td>
                        </tr>
                    </table>
                </td>
                <!-- Column : END -->
            </tr>
        </table>
    </td>
  </tr>
</table>

I tested this in Litmus and it works in every desktop-style email client and in mobile clients that support @media queries. If you download Cerberus, all you need to do is make two changes, add the class .stack-column-center-50 and copy the table and paste it into the email body table. Other than adding Column 1, 2, 3 to the tables, I made no other changes.

Cerberus Template: https://tedgoas.github.io/Cerberus/

Edit: You could combine the values of col-xs-6 and col-sm-4 into a new tag for col-xs-6 under 600px. Or create a new tag if you want to preserve how the current classes work. My example will still work with new names.

Good luck.

How to Create a Responsive Newsletter Template with Media Queries, So, in making an email template, it is highly recommended to use a To solve this, we need to use a tricky solution by using attribute selectors. The basic structures of the columns and inline CSS of elements such as the  Coding direct inline styles is really an hell of work, and every little adjustment means tons of code, with lot of errors and mistyping. So here come Email CSS inliners: these lovely pieces of code take your css and html and give you back your “css inlined” email template, ready to be sent.

html: Inline CSS, @media tag solution for an email template, For an email template I want an output like thisOn Wide Screenbut on small screen like mobile or @media (max-width: 768px) I want output like thisto achieve  Our CSS inliner is powered by Juice. We use this for our own templates and as it is an open source project it is constantly being working on and improved. You can inline your CSS above then copy the output into your email service provider or codebase. Or you can use a Juice module and inline the CSS in your codebase before your emails are sent.

Responsive Email Design | Email Code & Optimization, Apply it to newsletters and marketing templates alike. For context, media query support enables you to use many of the responsive techniques Inline styles are the safety net of CSS, as many email clients will strip away The second step to fix this issue is to add inline styles to your <tables> and other tags such as the  In this article, we will create a basic email template using HTML and CSS. These email templates are generally designed for marketing purpose and are circulated through email campaigns. The main purpose of sending an email template is to attain the number of Call to Action(CTA). The creative design of an email template engages a client and can

Creating a Simple Responsive HTML Email, It uses minimal media queries and a fluid width approach to ensure maximum professional solution, grab one of our popular HTML email templates on You can also use a tool such as Premailer to bring your CSS inline. No, @media rules and media queries cannot exist in inline style attributes as they can only contain property: value declarations. As the spec puts it:. The value of the style attribute must match the syntax of the contents of a CSS declaration block

Comments
  • One solution would be using javascript and the window.matchMedia
  • Why do you need to achieve this using inline CSS?
  • @enxaneta yes, but Its an email template, I have heard that mostly email clients block JS and doesn't allow it.
  • @MTCoster Basically its an email template, so its necessary to use Inline CSS
  • If it’s an email, it’s probably also necessary to use tables for layout, but that doesn’t mean responsive designs are impossible.
  • In this example you have used two separate blocks and fixed length, but in my scenario the situation is with one block, dynamically detect device width and adjust accordingly! without using @media tag and JS
  • The two blocks (small_screen, wide_screen) represent different size devices. You can put any width in there and it will work. The internal html is the same for either case.
  • Put any width? how can I put dynamic width? I am not allowed to use classes, only inline style attribute.
  • The only HTML you use is what is written here in the answer. You don't supply any width at all, except the width of the images. I added the outside blocks to represent the different devices. You wouldn't use those in your email template.