Email breaking in some web-based clients

Question

I am new to email designing. I've an image, some text and a button in a row. When viewed on a mobile device, the image has to be static and the button need to come below the text. So the Image and the text + button has to be side by side. I've used divs and nested divs. Its working as expected on Mobile device. However, the layout is breaking on some web based mail clients such as AOL, Yahoo and Gmail. Working fine on comcast and outlook web. Not sure what I am doing wrong. Please help.

Correctly rendered on comcast web.

Incorrectly rendered on Yahoo web based mail.

Here is the code I've used :

 @media screen and (max-width: 480px) { /* What it does: Forces table cells into full-width rows. */ .stack-column, .stack-column-center { display: block !important; width: 100% !important; max-width: 100% !important; direction: ltr !important; } /* What it does: Forces table cells into 1/3-width rows. */ .stack-column-half, .stack-column-center-half { display: inline-block !important; width: 140px !important; max-width: 140px !important; direction: ltr !important; } /* What it does: Forces table cells into 2/3-width rows. */ .stack-column-2half, .stack-column-center-2half { display: inline-block !important; width: 190px !important; max-width: 190px !important; direction: ltr !important; } /* And center justify these ones. */ .stack-column-center { text-align: center !important; } /* What it does: Generic utility class for centering. Useful for images, buttons, and nested tables. */ .center-on-narrow { text-align: center !important; display: block !important; margin-left: auto !important; margin-right: auto !important; float: none !important; } table.center-on-narrow { display: inline-block !important; } /* What it does: Adjust typography on small screens to improve readability */ .email-container p { font-size: 17px !important; }

 <tr> <!-- dir=ltr is where the magic happens. This can be changed to dir=rtl to swap the alignment on wide while maintaining stack order on narrow. --> <td dir="ltr" height="100%" valign="top" width="100%" style="font-size:0; padding: 10px 0; background-color: #ffffff;"> <!--[if mso]> <table role="presentation" border="0" cellspacing="0" cellpadding="0" width="600" style="width: 600px;"> <tr> <td valign="top" width="200" style="width: 200px;"> <![endif]--> <div style="display:inline-block; margin: 0 -1px; max-width: 200px; min-width:80px; vertical-align:top; width:100%;" class="stack-column-half"> <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%"> <tr> <td dir="ltr" style="padding: 0 10px 10px 10px;"> <img src="https://aishvaryarastogi.worldsecuresystems.com/waze-newsletter-images/Waze_Newsletter_Modules_Desktop_22.png" width="180" height="" border="0" alt="alt_text" class="center-on-narrow" style="width: 100%; max-width: 180px; height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555; border-radius: 10px;"> </td> </tr> </table> </div> <!--[if mso]> </td> <td valign="top" width="400" style="width: 400px;"> <![endif]--> <div style="display:inline-block; margin: 0 -1px; max-width: 400px; min-width:160px; vertical-align:top; padding-top: 40px; " class="stack-column-2half mobile-padding1"> <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%"> <tr> <td dir="ltr" style="font-family:'Open Sans', Arial, sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 10px 0px 0; text-align: left;" class="center-on-narrow fallback-text mobile-padding1"> <!--[if mso]> <table role="presentation" border="0" cellspacing="0" cellpadding="0" width="400"> <tr> <td valign="middle" width="200"> <![endif]--> <div style="display:inline-block; margin: 0 -1px; width:100%; min-width:80px; max-width:200px; vertical-align:top; padding: 0 0px;" class="stack-column" align="left"> <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%"> <tr> <td style="padding: 0 20px;" class="mobile-padding1"> <h2 style="margin: 0 0 10px 0; font-family:'Open Sans', Arial, sans-serif; font-size: 15px; line-height: 18px; color: #333333; font-weight: bold;">John Smith</h2> <p style="margin: 0 0 10px 0;">Title, title</p> </td> </tr> </table> </div> <!--[if mso]> </td> <td valign="middle" width="200"> <![endif]--> <div style="display:inline-block; margin: 0 -1px; width:100%; min-width:80px; max-width:200px; vertical-align:top; padding-top:0 0px; " class="stack-column mobile-padding1"> <!-- Button : BEGIN --> <!--[if mso]> <v:roundrect xmlns_v="urn:schemas-microsoft-com:vml" xmlns_w="urn:schemas-microsoft-com:office:word" href="https://google.com/" style="height:45px;v-text-anchor:middle;width:150px;" arcsize="50%" stroke="false" fillcolor="#32C2EE"> <w:anchorlock/> <center style="color:#333333;font-family:'Open Sans', Arial,sans-serif;font-size:15px;">Contact</center> </v:roundrect> <![endif]--> <!--[if !mso]> <!--> <table role="presentation" cellspacing="0" cellpadding="0" border="0" style="float:none;" align="left"> <tr> <td class="button-td button-td-primary" style="border-radius: 30px; background: #ffffff;"> <a class="button-a button-a-primary fallback-text" href="https://google.com/" style="background: #32C2EE; border: 0px solid #000000; font-family:'Open Sans', Arial, sans-serif; font-size: 15px; font-weight: bold; line-height: 15px; text-decoration: none; padding: 18px 55px; color: #333333; display: block; border-radius: 30px;">Contact</a> </td> </tr> </table> <!-- <![endif]--> <!-- Button : END --> </div> <!--[if mso]> </td> </tr> </table> <![endif]--> </td> </tr> </table> </div> <!--[if mso]> </td> </tr> </table> <![endif]--> </td> </tr> <!-- Thumbnail Left, Text Right : END -->

Answer 1

I had a play with your code and it seems you are missing width:100%; on the following line:

<div style="display:inline-block; margin: 0 -1px; max-width: 400px; min-width:160px; vertical-align:top; padding-top: 40px;" class="stack-column-2half mobile-padding1">

Once added, the contact link went back into the same line as John Smith and Title, title .

You can try the code below to see if it works for you. I had to add table codes around the table rows to get the rendering to work.

 <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <!-- dir=ltr is where the magic happens. This can be changed to dir=rtl to swap the alignment on wide while maintaining stack order on narrow. --> <td dir="ltr" height="100%" valign="top" width="100%" style="font-size:0; padding: 10px 0; background-color: #ffffff;"> <!--[if mso]> <table role="presentation" border="0" cellspacing="0" cellpadding="0" width="600" style="width: 600px;"> <tr> <td valign="top" width="200" style="width: 200px;"> <![endif]--> <div style="display:inline-block; margin: 0 -1px; max-width: 200px; min-width:80px; vertical-align:top; width:100%;" class="stack-column-half"> <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%"> <tr> <td dir="ltr" style="padding: 0 10px 10px 10px;"> <img src="https://aishvaryarastogi.worldsecuresystems.com/waze-newsletter-images/Waze_Newsletter_Modules_Desktop_22.png" width="180" height="" border="0" alt="alt_text" class="center-on-narrow" style="width: 100%; max-width: 180px; height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555; border-radius: 10px;"> </td> </tr> </table> </div> <!--[if mso]> </td> <td valign="top" width="400" style="width: 400px;"> <![endif]--> <div style="display:inline-block; margin: 0 -1px; max-width: 400px; min-width:160px; vertical-align:top; padding-top: 40px;width:100%;" class="stack-column-2half mobile-padding1"> <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%"> <tr> <td dir="ltr" style="font-family:'Open Sans', Arial, sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 10px 0px 0; text-align: left;" class="center-on-narrow fallback-text mobile-padding1"> <!--[if mso]> <table role="presentation" border="0" cellspacing="0" cellpadding="0" width="400"> <tr> <td valign="middle" width="200"> <![endif]--> <div style="display:inline-block; margin: 0 -1px; width:100%; min-width:80px; max-width:200px; vertical-align:top; padding: 0 0px;" class="stack-column" align="left"> <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%"> <tr> <td style="padding: 0 20px;" class="mobile-padding1"> <h2 style="margin: 0 0 10px 0; font-family:'Open Sans', Arial, sans-serif; font-size: 15px; line-height: 18px; color: #333333; font-weight: bold;">John Smith</h2> <p style="margin: 0 0 10px 0;">Title, title</p> </td> </tr> </table> </div> <!--[if mso]> </td> <td valign="middle" width="200"> <![endif]--> <div style="display:inline-block; margin: 0 -1px; width:100%; min-width:80px; max-width:200px; vertical-align:top; padding-top:0 0px; " class="stack-column mobile-padding1"> <!-- Button : BEGIN --> <!--[if mso]> <v:roundrect xmlns_v="urn:schemas-microsoft-com:vml" xmlns_w="urn:schemas-microsoft-com:office:word" href="https://google.com/" style="height:45px;v-text-anchor:middle;width:150px;" arcsize="50%" stroke="false" fillcolor="#32C2EE"> <w:anchorlock/> <center style="color:#333333;font-family:'Open Sans', Arial,sans-serif;font-size:15px;">Contact</center> </v:roundrect> <![endif]--> <!--[if !mso]> <!--> <table role="presentation" cellspacing="0" cellpadding="0" border="0" style="float:none;" align="left"> <tr> <td class="button-td button-td-primary" style="border-radius: 30px; background: #ffffff;"> <a class="button-a button-a-primary fallback-text" href="https://google.com/" style="background: #32C2EE; border: 0px solid #000000; font-family:'Open Sans', Arial, sans-serif; font-size: 15px; font-weight: bold; line-height: 15px; text-decoration: none; padding: 18px 55px; color: #333333; display: block; border-radius: 30px;">Contact</a> </td> </tr> </table> <!-- <![endif]--> <!-- Button : END --> </div> <!--[if mso]> </td> </tr> </table> <![endif]--> </td> </tr> </table> </div> <!--[if mso]> </td> </tr> </table> <![endif]--> </td> </tr> <!-- Thumbnail Left, Text Right : END --> </tbody> </table>