How to align 3 images responsive in HTML email?-CodePudding

I have an HTML email. I want 3 images side by side on a large screen with more then 900px width, like this:

On a mobile phone I would like to have the boxed below each other like this:

I want to achieve this in Gmail app and webbrowser. Unfortunately, I cant use media queries because they are not supported in Gmail app (and in my experience they also didn't work for Gmail web browser):

I can give the table a fix width like

<table  width="900px" >

but then it will always have width 900px also on mobile. So it will look on any device like this:

How can I get this to work?

CodePudding user response：

What you're looking for is commonly solved by use of the "fluid hybrid" technique. I'm going to steal from https://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919 for this, but it's a very common technique (there are others around too).

The essential code is below:

<div  style="font-size:0;text-align:center;">
    <!--[if mso]>
    <table role="presentation" width="100%" style="text-align:center;">
    <tr>
    <td style="width:220px;padding:10px;" valign="top">
    <![endif]-->
    <div  style="width:100%;max-width:220px;display:inline-block;vertical-align:top;">
        <div style="padding:10px;font-size:14px;line-height:18px;">
            [content goes here]
        </div>
    </div>
    <!--[if mso]>
    </td>
    <td style="width:220px;padding:10px;" valign="top">
    <![endif]-->
    <div  style="width:100%;max-width:220px;display:inline-block;vertical-align:top;">
        <div style="padding:10px;font-size:14px;line-height:18px;">
            [content goes here]
        </div>
    </div>
    <!--[if mso]>
    </td>
    <td style="width:220px;padding:10px;" valign="top">
    <![endif]-->
    <div  style="width:100%;max-width:220px;display:inline-block;vertical-align:top;">
        <div style="padding:10px;font-size:14px;line-height:18px;">
            [content goes here]
        </div>
    </div>
    <!--[if mso]>
    </td>
    </tr>
    </table>
    <![endif]-->
</div>

Now, you can still use media queries to enhance the experience for those email clients that do support embedded <style>s.

So you can add this, as one possible example, in the <head>:

<style type="text/css">
    @media screen and (max-width: 350px) {
        .three-col .column {
            max-width: 100% !important;
        }
    }
    @media screen and (min-width: 351px) and (max-width: 460px) {
        .three-col .column {
            max-width: 50% !important;
        }
    }
    @media screen and (min-width: 461px) {
        .three-col .column {
            max-width: 33.3% !important;
        }
        .two-col .column {
            max-width: 50% !important;
        }
        .sidebar .small {
            max-width: 16% !important;
        }
        .sidebar .large {
            max-width: 84% !important;
        }
    }
</style>