Search code examples
csshtml-email

How to align 3 images responsive in HTML email?

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

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

enter image description here

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): https://www.campaignmonitor.com/css/media-queries/media/

How can I do this? My basic Idea was to use a table like this:

<table width="100%" align="center"  border="0" cellpadding="0" cellspacing="0" >
    <tr>
        <td align="center">
            <table class="my-table-size" border="0" cellpadding="0" cellspacing="0" >
                <tr>
                    <td align="center">
                        <img style="display: inline-block" src="http://www.my.dev/box.jpg" alt="logo" height="90" >
                        <img style="display: inline-block" src="http://www.my.dev/box.jpg" alt="logo" height="90" class="middleimage">
                        <img style="display: inline-block" src="http://www.my.dev/box.jpg" alt="logo" height="90" >
                     </td>
                 </tr>
             </table>
        </td>
    </tr>
</table>

But it seems that the "inline-block" style is ignored, because the images are always below each other as in - even if there would be enough space to put them side by side.

enter image description here

I can give the table a fix width like

<table class="my-table-size" width="900px" >

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

enter image description here

How can I get this to work?

Solution

  • 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 class="three-col" 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 class="column" 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 class="column" 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 class="column" 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>