HTML Responsive images in email client

0
votes

I have very simple content to be created. please see the link for the image. I have email template screenshot

Now this need to be responsive. If I see on the bigger screen, I should see 2 images. if I see in mobile I should see 1 image with text below and buttons. 

<table align="center" border="0" cellpadding="10" cellspacing="0" style="height:100%;width:100%;">
  <tr>
    <td style="text-align: center;height:5%;">
      <hr style="width: 90%;height: 1px;background-color: #dddddd;">
    </td>
  </tr>
  <tr style="text-align: center;height:1%;">
    <td style="width: 360px; height: 0.5%; font-family: Arial; font-size: 7px; font-weight: bold; line-height: 0.5%; color: rgb(0, 0, 0); text-align: center;">
    </td>
  </tr>
  <tr>
    <td style="text-align: center;">
      <span style="font-size:32px;"><span style="font-family:arial,helvetica,sans-serif;"><b>
        <span style="text-align: center;">Popular destinations </span> 
        </b></span></span>
    </td>
  </tr>
  <tr>
    <td style="text-align: center;">
    </td>
  </tr>
  <tr style="width: 571px;height: 40px;font-family: Arial;font-size: 15px;line-height: 1.33;text-align: center;color: #222222;">
    <td style="text-align: center;margin-left:10%;margin-right:10%;">
      <div style="margin-left: 40px;">
        <font color="#000000" face="Times New Roman">
          <span style="font-size: 16px;">Praesent pretium, eros eget porttitor tempor, turpis nisi dignissim est, vitae vehicula massa est a nulla isus nibh, egestas sit amet feugiat eget, semper sit amet nunc.</span> 
        </font>
      </div>
    </td>
  </tr>
  <tr>
    <td>
    </td>
  </tr>
  <tr>
    <td>
      <table border="0" cellpadding="0" cellspacing="0" style="width:100%;">
        <tr>
          <td>
            <img data-assetid="12696" height="234" src="http://image.ef.com/lib/fe8b1372726d057a76/m/1/150b60dc-693b-43dc-bab8-0e950ba593d1.jpg" style="padding: 0px; border-width: 0px; border-color: transparent; border-style: solid; text-align: center; height: auto; width: 100%;" width="310">
          </td>
          <td>
            <img data-assetid="12696" height="234" src="http://image.ef.com/lib/fe8b1372726d057a76/m/1/150b60dc-693b-43dc-bab8-0e950ba593d1.jpg" style="padding: 0px; border-width: 0px; border-color: transparent; border-style: solid; text-align: center; height: auto; width: 100%;" width="310">
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>
    </td>
  </tr>
  <tr>
    <td>
      <table border="0" cellpadding="0" cellspacing="0" style="width:100%;">
        <tr>
          <td>
            <div style="margin-left: 40px; line-height: 1.5;">
              <span style="font-family:times new roman,times,serif;"><span style="font-size:26px;">Brigton</span></span>
              <br>
              Starting from $400/week
            </div>
          </td>
          <td>
            <div style="margin-left: 40px; line-height: 1.5;">
              <span style="font-size:26px;"><span style="font-family:times new roman,times,serif;">Brigton</span></span>
              <br>
              Starting from $400/week
            </div>
          </td>
        </tr>
      </table>
      <div style="margin-left: 40px;">
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <table border="0" cellpadding="0" cellspacing="0" style="width:100%;">
        <tr>
          <td>
          </td>
          <td>
            <div>
              <!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://litmus.com" style="height:36px;v-text-anchor:middle;width:140px;" arcsize="50%" strokecolor="#00a4c3" fillcolor="white">
<w:anchorlock/>
<center style="color:#222222;font-family:Helvetica, Arial,sans-serif;font-size:16px;">Learn More</center>
</v:roundrect>
<![endif]-->
              <a href="http://buttons.cm" style="background-color:#ffffff;border:1px solid #00a4c3;border-radius:3px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;line-height:44px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;mso-hide:all;color:#00a4c3">Learn More</a>
            </div>
          </td>
          <td>
            <div>
            </div>
          </td>
          <td>
            <div>
              <!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://litmus.com" style="height:36px;v-text-anchor:middle;width:140px;" arcsize="50%" strokecolor="#00a4c3" fillcolor="white">
<w:anchorlock/>
<center style="color:#222222;font-family:Helvetica, Arial,sans-serif;font-size:16px;">Learn More</center>
</v:roundrect>
<![endif]-->
              <a href="http://buttons.cm" style="background-color:#ffffff;border:1px solid #00a4c3;border-radius:3px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;line-height:44px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;mso-hide:all;color:#00a4c3">Learn More</a>
            </div>
          </td>
        </tr>
      </table>
      <div style="margin-left: 40px;">
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <table border="0" cellpadding="0" cellspacing="0" style="width:100%;">
        <tr>
          <td>
            <img data-assetid="12696" height="234" src="http://image.ef.com/lib/fe8b1372726d057a76/m/1/150b60dc-693b-43dc-bab8-0e950ba593d1.jpg" style="padding: 0px; border-width: 0px; border-color: transparent; border-style: solid; text-align: center; height: auto; width: 100%;" width="310">
          </td>
          <td>
            <img data-assetid="12696" height="234" src="http://image.ef.com/lib/fe8b1372726d057a76/m/1/150b60dc-693b-43dc-bab8-0e950ba593d1.jpg" style="padding: 0px; border-width: 0px; border-color: transparent; border-style: solid; text-align: center; height: auto; width: 100%;" width="310">
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>
      <table border="0" cellpadding="0" cellspacing="0" style="width:100%;">
        <tr>
          <td>
            <div style="margin-left: 40px; line-height: 1.5;">
              <span style="font-family: &quot;times new roman&quot;, times, serif;"><span style="font-size: 26px;">Brigton</span></span>
              <br>
              Starting from $400/week
            </div>
          </td>
          <td>
            <div style="margin-left: 40px; line-height: 1.5;">
              <span style="font-family: &quot;times new roman&quot;, times, serif;"><span style="font-size: 26px;">Brigton</span></span>
              <br>
              Starting from $400/week
            </div>
          </td>
        </tr>
      </table>
      <div style="margin-left: 40px;">
      </div>
    </td>
  </tr>
  <tr>
    <td>
      <table border="0" cellpadding="0" cellspacing="0" style="width:100%;">
        <tr>
          <td>
            <div style="margin-left: 40px;">
            </div>
          </td>
          <td>
            <div>
              <!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://litmus.com" style="height:36px;v-text-anchor:middle;width:140px;" arcsize="50%" strokecolor="#00a4c3" fillcolor="white">
<w:anchorlock/>
<center style="color:#222222;font-family:Helvetica, Arial,sans-serif;font-size:16px;">Learn More</center>
</v:roundrect>
<![endif]-->
              <a href="http://buttons.cm" style="background-color:#ffffff;border:1px solid #00a4c3;border-radius:3px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;line-height:44px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;mso-hide:all;color:#00a4c3">Learn More</a>
            </div>
          </td>
          <td>
            <div>
              <!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://litmus.com" style="height:36px;v-text-anchor:middle;width:140px;" arcsize="50%" strokecolor="#00a4c3" fillcolor="white">
<w:anchorlock/>
<center style="color:#222222;font-family:Helvetica, Arial,sans-serif;font-size:16px;">Learn More</center>
</v:roundrect>
<![endif]-->
              <a href="http://buttons.cm" style="background-color:#ffffff;border:1px solid #00a4c3;border-radius:3px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;line-height:44px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;mso-hide:all;color:#00a4c3">Learn More</a>
            </div>
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>
    </td>
  </tr>
  <tr>
    <td>
    </td>
  </tr>
  <tr>
    <td>
    </td>
  </tr>
  <tr>
    <td>
    </td>
  </tr>
  <tr>
    <td>
    </td>
  </tr>
  <tr>
    <td>
    </td>
  </tr>
</table>

The problem I have is

  1. when I open email mobile, then image still show 2 columns instead of one column
  2. the buttons are not properly getting align.

spend a night on this, can you please help

I cannot use media query and the email needs to open in common email clients like outlook or yahoo or Gmail

1
html

1 Answers

2
votes

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
</head>

<body>
<style type="text/css">
@media only screen and (max-width: 479px) {
.col{ width:100% !important; float:left !important; margin-bottom:15px !important; }
}
</style>
<table align="center" border="0" cellpadding="10" cellspacing="0" style="height:100%;width:100%;">
  <tr>
    <td style="text-align: center;height:5%;"><hr style="width: 90%;height: 1px;background-color: #dddddd;"></td>
  </tr>
  <tr style="text-align: center;height:1%;">
    <td style="width: 360px; height: 0.5%; font-family: Arial; font-size: 7px; font-weight: bold; line-height: 0.5%; color: rgb(0, 0, 0); text-align: center;"></td>
  </tr>
  <tr>
    <td style="text-align: center;"><span style="font-size:32px;"><span style="font-family:arial,helvetica,sans-serif;"><b> <span style="text-align: center;">Popular destinations </span> </b></span></span></td>
  </tr>
  <tr style="width: 571px;height: 40px;font-family: Arial;font-size: 15px;line-height: 1.33;text-align: center;color: #222222;">
    <td style="text-align: center;margin-left:10%;margin-right:10%;"><div style="margin-left: 40px;"> <font color="#000000" face="Times New Roman"> <span style="font-size: 16px;">Praesent pretium, eros eget porttitor tempor, turpis nisi dignissim est, vitae vehicula massa est a nulla isus nibh, egestas sit amet feugiat eget, semper sit amet nunc.</span> </font> </div></td>
  </tr>
  <tr>
    <td><table border="0" cellpadding="0" cellspacing="0" style="width:100%;">
        <tr>
          <td class="col"><img data-assetid="12696" height="234" src="http://image.ef.com/lib/fe8b1372726d057a76/m/1/150b60dc-693b-43dc-bab8-0e950ba593d1.jpg" style="padding: 0px; border-width: 0px; border-color: transparent; border-style: solid; text-align: center; height: auto; width: 100%;" width="310">
            <div style="margin-left: 40px; line-height: 1.5;"> <span style="font-family:times new roman,times,serif;"><span style="font-size:26px;">Brigton</span></span> <br>
              Starting from $400/week </div>
            <div style="margin:15px 0 0 40px;"> 
              <!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://litmus.com" style="height:36px;v-text-anchor:middle;width:140px;" arcsize="50%" strokecolor="#00a4c3" fillcolor="white">
<w:anchorlock/>
<center style="color:#222222;font-family:Helvetica, Arial,sans-serif;font-size:16px;">Learn More</center>
</v:roundrect>
<![endif]--> 
              <a href="http://buttons.cm" style="background-color:#ffffff;border:1px solid #00a4c3;border-radius:3px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;line-height:44px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;mso-hide:all;color:#00a4c3">Learn More</a> </div></td>
          <td class="col"><img data-assetid="12696" height="234" src="http://image.ef.com/lib/fe8b1372726d057a76/m/1/150b60dc-693b-43dc-bab8-0e950ba593d1.jpg" style="padding: 0px; border-width: 0px; border-color: transparent; border-style: solid; text-align: center; height: auto; width: 100%;" width="310">
            <div style="margin-left: 40px; line-height: 1.5;"> <span style="font-size:26px;"><span style="font-family:times new roman,times,serif;">Brigton</span></span> <br>
              Starting from $400/week </div>
            <div style="margin:15px 0 0 40px;"> 
              <!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://litmus.com" style="height:36px;v-text-anchor:middle;width:140px;" arcsize="50%" strokecolor="#00a4c3" fillcolor="white">
<w:anchorlock/>
<center style="color:#222222;font-family:Helvetica, Arial,sans-serif;font-size:16px;">Learn More</center>
</v:roundrect>
<![endif]--> 
              <a href="http://buttons.cm" style="background-color:#ffffff;border:1px solid #00a4c3;border-radius:3px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;line-height:44px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;mso-hide:all;color:#00a4c3">Learn More</a> </div></td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td><table border="0" cellpadding="0" cellspacing="0" style="width:100%;">
        <tr>
          <td class="col"><img data-assetid="12696" height="234" src="http://image.ef.com/lib/fe8b1372726d057a76/m/1/150b60dc-693b-43dc-bab8-0e950ba593d1.jpg" style="padding: 0px; border-width: 0px; border-color: transparent; border-style: solid; text-align: center; height: auto; width: 100%;" width="310">
            <div style="margin-left: 40px; line-height: 1.5;"> <span style="font-family: &quot;times new roman&quot;, times, serif;"><span style="font-size: 26px;">Brigton</span></span> <br>
              Starting from $400/week </div>
            <div style="margin:15px 0 0 40px;"> 
              <!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://litmus.com" style="height:36px;v-text-anchor:middle;width:140px;" arcsize="50%" strokecolor="#00a4c3" fillcolor="white">
<w:anchorlock/>
<center style="color:#222222;font-family:Helvetica, Arial,sans-serif;font-size:16px;">Learn More</center>
</v:roundrect>
<![endif]--> 
              <a href="http://buttons.cm" style="background-color:#ffffff;border:1px solid #00a4c3;border-radius:3px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;line-height:44px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;mso-hide:all;color:#00a4c3">Learn More</a> </div></td>
          <td class="col"><img data-assetid="12696" height="234" src="http://image.ef.com/lib/fe8b1372726d057a76/m/1/150b60dc-693b-43dc-bab8-0e950ba593d1.jpg" style="padding: 0px; border-width: 0px; border-color: transparent; border-style: solid; text-align: center; height: auto; width: 100%;" width="310">
            <div style="margin-left: 40px; line-height: 1.5;"> <span style="font-family: &quot;times new roman&quot;, times, serif;"><span style="font-size: 26px;">Brigton</span></span> <br>
              Starting from $400/week </div>
            <div style="margin:15px 0 0 40px;"> 
              <!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://litmus.com" style="height:36px;v-text-anchor:middle;width:140px;" arcsize="50%" strokecolor="#00a4c3" fillcolor="white">
<w:anchorlock/>
<center style="color:#222222;font-family:Helvetica, Arial,sans-serif;font-size:16px;">Learn More</center>
</v:roundrect>
<![endif]--> 
              <a href="http://buttons.cm" style="background-color:#ffffff;border:1px solid #00a4c3;border-radius:3px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;line-height:44px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;mso-hide:all;color:#00a4c3">Learn More</a> </div></td>
        </tr>
      </table></td>
  </tr>
</table>
</body>
</html>