Responsive Order Confirmation Emails for Mobile Devices

Responsive order confirmation emails for mobile devices?

You can use liquid layout so set all width and to be in percentage.
I would also look into grid layouts or column layouts.

So far most big sites like eBay Google and so on still use tables to send out their emails.
Tables are are still useful and used widely but with the new css3 like flex, column-count, grids .. tables will probably deprecate in the future.

Again the new CSS3 features are still in testing so not compatible on all browsers.

http://www.w3schools.com/css/css3_multiple_columns.asp

http://www.w3schools.com/cssref/css3_pr_box-flex.asp

HTML responsive email width issue in Outlook

Set a center alignment on your container and it will resolve your problem.

The code I'm pasting also suggests some additional improvements you can leverage if you like.

<center>
    <table width="100%" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td align="center" valign="top">    
                <table border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td>YOUR EMAIL CONTENT NESTED HERE</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</center>

How to make HTML table responsive for email template when using an external CSS file is not a possibility

Google offers CSS support: https://developers.google.com/gmail/design/css as A. Meshu pointed out in his comments to my question.

I found at https://templates.mailchimp.com/development/responsive-email/ that they say this:

"You can leave the media query styles in the <head> of your email, as
clients that support media queries don’t strip out the <head> or
<style> areas."

That made me think I had to send a complete <HTML> document, so I even included <html><head><style type="text/css">..........</style></head><body>...........</body></html>.

For my other email templates I just send code for the <body>. I start the template with a <div> and everything works. But for this template now I am using this structure:

<html>
<head>
<style type="text/css">
@media screen and (max-width:450px) {
    .responsive {
        float:left!important;
        width:100%!important
    }
}
</style>
</head>
<body>
..........
</body>
</html>

Thanks to A. Meshu for providing very important hints in his comments to my question to figure it out.

Is there an equivalent of CSS max-width that works in HTML emails?

Yes, there is a way to emulate max-width using a table, thus giving you both responsive and Outlook-friendly layout. What's more, this solution doesn't require conditional comments.

Suppose you want the equivalent of a centered div with max-width of 350px. You create a table, set the width to 100%. The table has three cells in a row. Set the width of the center TD to 350 (using the HTML width attribute, not CSS), and there you go.

If you want your content aligned left instead of centered, just leave out the first empty cell.

Example:

<table border="0" cellspacing="0" width="100%">
    <tr>
        <td></td>
        <td width="350">The width of this cell should be a maximum of 
                  350 pixels, but shrink to widths less than 350 pixels.
        </td>
        <td></td>
     </tr>
</table>

In the jsfiddle I give the table a border so you can see what's going on, but obviously you wouldn't want one in real life:

http://jsfiddle.net/YcwM7/

Responsive Order Confirmation Emails for Mobile Devices