I am creating a webpage and I have 99% of the page done. For some reason, I can't figure out the HTML/CSS part of one minor feature. My design looks like this right now(attachment titled before picture):
before picture
I want it to look like this (attachment titled after picture). after picture
As you can see, I have almost everything done, I just need to add a small grey box that says "Feature Presenter 1" and so forth above the picture but I can not figure out what the HTML/CSS should be. Can someone please modify my HTML/CSS code below so that it matches the after picture? Please someone help me, I am so close to completing the project. Thank you so much
The HTML is below:
<tr>
<td align="center" valign="top" bgcolor="#ffffff" style="background-color:#ffffff;"><table width="700" border="0" cellspacing="0" cellpadding="0" align="center" style="width:700px;" class="em_wrapper">
<tr>
<td width="18" style="width:18px;" class="em_side10"> </td>
<td align="center" valign="top"><table width="668" border="0" cellspacing="0" cellpadding="0" align="center" style="width:668px;" class="em_wrapper">
<tr>
<td align="center" valign="top"><table width="328" border="0" cellspacing="0" cellpadding="0" align="left" style="width:328px;" class="em_wrapper">
<tr>
<td align="center" valign="top"><table width="328" border="0" cellspacing="0" cellpadding="0" align="center" style="width:328px;" class="em_w300">
<tr>
<td align="center" valign="top"><table width="157" border="0" cellspacing="0" cellpadding="0" align="left" style="width:157px;" class="em_wrapper">
<tr>
<td align="center" valign="top" height="189" style="height:189px;border: solid 2px #4d4d4d; display:block; border-top-left-radius:5px; border-top-right-radius:5px;"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" class="em_wrapper" >
<tr>
<td height="189" align="center" valign="bottom" style="height:189px;"><img src="https://tieitapp-cdn1.s3.amazonaws.com/home/tieit/domains/app.tieit.io/public_html/assets/img/email/026696a00d07148ec092a60c0cd8b8d3.png" width="145" alt="" height="163" style="display:block; font-family:Arial, sans-serif; font-size:20px; line-height:30px; color:#000000; max-width:145px; height:163px;" class="em_g_img" border="0" /></td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="top" bgcolor="#4d4d4d" style="background-color:#4d4d4d; border-bottom-left-radius:5px; border-bottom-right-radius:5px;"><table width="157" border="0" cellspacing="0" cellpadding="0" align="center" style="width:157px;" class="em_wrapper">
<tr>
<td align="center" valign="top" style="padding:0px 10px;"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td class="em_white" align="center" valign="top" style="font-family: 'Roboto', Arial, sans-serif; font-size:14px; line-height:17px; color:#ffffff;padding:8px 0px; "><span style="font-weight:bold;"><Name></span> <br />
<Institution></td>
</tr>
<tr>
<td align="center" valign="top" style="padding-bottom:11px;"><table width="125" border="0" cellspacing="0" cellpadding="0" align="center" style="width:125px;">
<tr>
<td align="center" valign="top" bgcolor="#007f3d" style="border-radius:5px;"><table width="125" border="0" cellspacing="0" cellpadding="0" align="center" style="width:125px;">
<tr>
<td class="em_white" align="center" valign="middle" height="56" style="height:56px; font-family: 'Roboto', Arial, sans-serif; font-size:13px; color:#ffffff; font-weight:bold; "><a href="#" target="_blank" style="text-decoration:none; color:#ffffff; display:block; line-height:16px; ">View Participation<br />
Options</a></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
<td width="12" style="width:12px;" > </td>
<td align="center" valign="top"><table width="157" border="0" cellspacing="0" cellpadding="0" align="left" style="width:157px;" class="em_wrapper">
<tr>
<td align="center" valign="top" style="border: solid 2px #4d4d4d; display:block; border-top-left-radius:5px; border-top-right-radius:5px;"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" class="em_wrapper" >
<tr>
<td height="189" style="height:189px;" align="center" valign="bottom"><img src="https://tieitapp-cdn1.s3.amazonaws.com/home/tieit/domains/app.tieit.io/public_html/assets/img/email/787e8651d36187721fdec8615b8e4463.png" width="145" alt="" height="159" style="display:block; font-family:Arial, sans-serif; font-size:20px; line-height:30px; color:#000000; max-width:145px; height:159px;" class="em_g_img" border="0" /></td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="top" bgcolor="#4d4d4d" style="background-color:#4d4d4d; border-bottom-left-radius:5px; border-bottom-right-radius:5px;"><table width="157" border="0" cellspacing="0" cellpadding="0" align="center" style="width:157px;" class="em_wrapper">
<tr>
<td align="center" valign="top" style="padding:0px 10px;"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td class="em_white" align="center" valign="top" style="font-family: 'Roboto', Arial, sans-serif; font-size:14px; line-height:17px; color:#ffffff;padding:8px 0px; "><span style="font-weight:bold;"><Name></span> <br />
<Institution></td>
</tr>
<tr>
<td align="center" valign="top" style="padding-bottom:11px;"><table width="125" border="0" cellspacing="0" cellpadding="0" align="center" style="width:125px;">
<tr>
<td align="center" valign="top" bgcolor="#007f3d" style="border-radius:5px;"><table width="125" border="0" cellspacing="0" cellpadding="0" align="center" style="width:125px;">
<tr>
<td class="em_white" align="center" valign="middle" height="56" style="height:56px; font-family: 'Roboto', Arial, sans-serif; font-size:13px; color:#ffffff; font-weight:bold; "><a href="#" target="_blank" style="text-decoration:none; color:#ffffff; display:block; line-height:16px; ">View Participation<br />
Options</a></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
<table width="328" border="0" cellspacing="0" cellpadding="0" align="right" style="width:328px;" class="em_wrapper">
<tr>
<td align="center" valign="top" class="em_ptop"><table width="328" border="0" cellspacing="0" cellpadding="0" align="center" style="width:328px;" class="em_w300">
<tr>
<td align="center" valign="top"><table width="157" border="0" cellspacing="0" cellpadding="0" align="left" style="width:157px;" class="em_wrapper">
<tr>
<td align="center" valign="top" height="189" style="height:189px;border: solid 2px #4d4d4d; display:block; border-top-left-radius:5px; border-top-right-radius:5px;"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" class="em_wrapper" >
<tr>
<td height="189" style="height:189px;" align="center" valign="bottom"><img src="https://tieitapp-cdn1.s3.amazonaws.com/home/tieit/domains/app.tieit.io/public_html/assets/img/email/1c43c6297227649ba26e611381191ef9.png" width="145" alt="" height="153" style="display:block; font-family:Arial, sans-serif; font-size:20px; line-height:30px; color:#000000; max-width:145px; height:153px;" class="em_g_img" border="0" /></td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="top" bgcolor="#4d4d4d" style="background-color:#4d4d4d; border-bottom-left-radius:5px; border-bottom-right-radius:5px;"><table width="157" border="0" cellspacing="0" cellpadding="0" align="center" style="width:157px;" class="em_wrapper">
<tr>
<td align="center" valign="top" style="padding:0px 10px;"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td class="em_white" align="center" valign="top" style="font-family: 'Roboto', Arial, sans-serif; font-size:14px; line-height:17px; color:#ffffff;padding:8px 0px; "><span style="font-weight:bold;"><Name></span> <br />
<Institution></td>
</tr>
<tr>
<td align="center" valign="top" style="padding-bottom:11px;"><table width="125" border="0" cellspacing="0" cellpadding="0" align="center" style="width:125px;">
<tr>
<td align="center" valign="top" bgcolor="#007f3d" style="border-radius:5px;"><table width="125" border="0" cellspacing="0" cellpadding="0" align="center" style="width:125px;">
<tr>
<td class="em_white" align="center" valign="middle" height="56" style="height:56px; font-family: 'Roboto', Arial, sans-serif; font-size:13px; color:#ffffff; font-weight:bold; "><a href="#" target="_blank" style="text-decoration:none; color:#ffffff; display:block; line-height:16px; ">View Participation<br />
Options</a></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
<td width="12" style="width:12px;" > </td>
<td align="center" valign="top"><table width="157" border="0" cellspacing="0" cellpadding="0" align="left" style="width:157px;" class="em_wrapper">
<tr>
<td align="center" valign="top" height="189" style="height:189px;border: solid 2px #4d4d4d; display:block; border-top-left-radius:5px; border-top-right-radius:5px;"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" class="em_wrapper" >
<tr>
<td height="189" style="height:189px;" align="center" valign="bottom"><img src="https://tieitapp-cdn1.s3.amazonaws.com/home/tieit/domains/app.tieit.io/public_html/assets/img/email/887a206a411d8ffd17674ffda4b9a939.png" width="145" alt="" height="157" style="display:block; font-family:Arial, sans-serif; font-size:20px; line-height:30px; color:#000000; max-width:145px; height:157px;" class="em_g_img" border="0" /></td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="top" bgcolor="#4d4d4d" style="background-color:#4d4d4d; border-bottom-left-radius:5px; border-bottom-right-radius:5px;"><table width="157" border="0" cellspacing="0" cellpadding="0" align="center" style="width:157px;" class="em_wrapper">
<tr>
<td align="center" valign="top" style="padding:0px 10px;"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td class="em_white" align="center" valign="top" style="font-family: 'Roboto', Arial, sans-serif; font-size:14px; line-height:17px; color:#ffffff;padding:8px 0px; "><span style="font-weight:bold;"><Name></span> <br />
<Institution></td>
</tr>
<tr>
<td align="center" valign="top" style="padding-bottom:11px;"><table width="125" border="0" cellspacing="0" cellpadding="0" align="center" style="width:125px;">
<tr>
<td align="center" valign="top" bgcolor="#007f3d" style="border-radius:5px;"><table width="125" border="0" cellspacing="0" cellpadding="0" align="center" style="width:125px;">
<tr>
<td class="em_white" align="center" valign="middle" height="56" style="height:56px; font-family: 'Roboto', Arial, sans-serif; font-size:13px; color:#ffffff; font-weight:bold; "><a href="#" target="_blank" style="text-decoration:none; color:#ffffff; display:block; line-height:16px; ">View Participation<br />
Options</a></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
<td width="14" style="width:14px;" class="em_side10"> </td>
</tr>
</table></td>
</tr>
<!-- //four column section -->
THE CSS is below:
<style type="text/css">
body { margin: 0; padding: 0; -webkit-text-size-adjust: 100% !important; -ms-text-size-adjust: 100% !important; -webkit-font-smoothing: antialiased !important; }
img { border: 0 !important; outline: none !important; }
td, a, span { border-collapse: collapse; mso-line-height-rule: exactly; }
.ExternalClass * { line-height: 100%; }
.em_defaultlink a { color: inherit !important; text-decoration: none !important; }
.em_black a { text-decoration: none; color: #000000; }
.em_white a { text-decoration: none; color: #ffffff; }
.em_blue a { text-decoration: none; color: #0a75b1; }
.em_grey a { text-decoration: none; color: #4d4d4d; }
.em_g_img + div { display: none; }
#media only screen and (min-width:481px) and (max-width:667px) {
.em_main_table { width: 100% !important; }
.em_wrapper { width: 100% !important; }
.em_hide { display: none !important; }
.em_full_img { width: 100% !important; height: auto !important; }
.em_full_img img { width: 100% !important; height: auto !important; }
.em_side10 { width: 10px !important; }
.em_ptop { padding-top: 20px !important; } /* Padding Left Right Bottom */
.em_h20 { height: 20px !important; font-size: 1px!important; line-height: 1px!important; }
.em_w300 { width: 320px !important; }
.em_w280 { width: 320px !important; }
.em_font_18 { font-size: 27px !important; line-height: 31px !important; }
}
#media screen and (max-width: 480px) {
.em_main_table { width: 100% !important; }
.em_wrapper { width: 100% !important; }
.em_hide { display: none !important; }
.em_full_img { width: 100% !important; height: auto !important; }
.em_full_img img { width: 100% !important; height: auto !important; }
.em_side10 { width: 10px !important; }
.em_side_10 { width: 10px !important; }
.em_ptop { padding-top: 20px !important; } /* Padding Left Right Bottom */
.em_h20 { height: 20px !important; font-size: 1px!important; line-height: 1px!important; }
.em_font_18 { font-size: 18px !important; line-height: 23px !important; }
.em_w300 { width: 300px !important; } /* update the N number as per width */
.em_w280 { width: 300px !important; }
.em_w146 { width: 146px !important; }
.em_aside25 { padding: 0px 25px !important; }
u + .em_body .em_full_wrap { width: 100% !important; width: 100vw !important; }
}
</style>
I don't know what are you trying to do there. I can tell you it is not the right way to do it. Please try to implement Bootstrap. Right now I'm giving you the code you need for the sack of your question.
<tr>
<td align="center" valign="top" bgcolor="#ffffff" style="background-color:#ffffff;"><table width="700" border="0" cellspacing="0" cellpadding="0" align="center" style="width:700px;" class="em_wrapper">
<tr>
<td width="18" style="width:18px;" class="em_side10"> </td>
<td align="center" valign="top"><table width="668" border="0" cellspacing="0" cellpadding="0" align="center" style="width:668px;" class="em_wrapper">
<tr>
<td align="center" valign="top"><table width="328" border="0" cellspacing="0" cellpadding="0" align="left" style="width:328px;" class="em_wrapper">
<tr>
<td align="center" valign="top"><table width="328" border="0" cellspacing="0" cellpadding="0" align="center" style="width:328px;" class="em_w300">
<tr>
<td align="center" valign="top"><table width="157" border="0" cellspacing="0" cellpadding="0" align="left" style="width:157px;" class="em_wrapper">
<tr>
<td align="center" valign="top" style="border: solid 2px #9e9f9f; display:block; "><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" class="em_wrapper" >
<tr><td align="center" valign="top" bgcolor="#9e9f9f" style="background-color:#9e9f9f; color:#fff;">Feature Presenter 1<table width="157" border="0" cellspacing="0" cellpadding="0" align="center" style="width:157px;" class="em_wrapper"></table></td></tr>
<tr>
<td height="189" align="center" valign="bottom" style="height:189px;"><img src="https://tieitapp-cdn1.s3.amazonaws.com/home/tieit/domains/app.tieit.io/public_html/assets/img/email/026696a00d07148ec092a60c0cd8b8d3.png" width="145" alt="" height="163" style="display:block; font-family:Arial, sans-serif; font-size:20px; line-height:30px; color:#000000; max-width:145px; height:163px;" class="em_g_img" border="0" /></td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="top" bgcolor="#4d4d4d" style="background-color:#4d4d4d; border-bottom-left-radius:5px; border-bottom-right-radius:5px;"><table width="157" border="0" cellspacing="0" cellpadding="0" align="center" style="width:157px;" class="em_wrapper">
<tr>
<td align="center" valign="top" style="padding:0px 10px;"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td class="em_white" align="center" valign="top" style="font-family: 'Roboto', Arial, sans-serif; font-size:14px; line-height:17px; color:#ffffff;padding:8px 0px; "><span style="font-weight:bold;"><Name></span> <br />
<Institution></td>
</tr>
<tr>
<td align="center" valign="top" style="padding-bottom:11px;"><table width="125" border="0" cellspacing="0" cellpadding="0" align="center" style="width:125px;">
<tr>
<td align="center" valign="top" bgcolor="#007f3d" style="border-radius:5px;"><table width="125" border="0" cellspacing="0" cellpadding="0" align="center" style="width:125px;">
<tr>
<td class="em_white" align="center" valign="middle" height="56" style="height:56px; font-family: 'Roboto', Arial, sans-serif; font-size:13px; color:#ffffff; font-weight:bold; "><a href="#" target="_blank" style="text-decoration:none; color:#ffffff; display:block; line-height:16px; ">View Participation<br />
Options</a></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
<td width="12" style="width:12px;" > </td>
<td align="center" valign="top"><table width="157" border="0" cellspacing="0" cellpadding="0" align="left" style="width:157px;" class="em_wrapper">
<tr>
<td align="center" valign="top" style="border: solid 2px #9e9f9f; display:block; "><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" class="em_wrapper" >
<tr><td align="center" valign="top" bgcolor="#9e9f9f" style="background-color:#9e9f9f; color:#fff;">Feature Presenter 2<table width="157" border="0" cellspacing="0" cellpadding="0" align="center" style="width:157px;" class="em_wrapper"></table></td></tr>
<tr>
<td height="189" align="center" valign="bottom" style="height:189px;"><img src="https://tieitapp-cdn1.s3.amazonaws.com/home/tieit/domains/app.tieit.io/public_html/assets/img/email/787e8651d36187721fdec8615b8e4463.png" width="145" alt="" height="159" style="display:block; font-family:Arial, sans-serif; font-size:20px; line-height:30px; color:#000000; max-width:145px; height:159px;" class="em_g_img" border="0" /></td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="top" bgcolor="#4d4d4d" style="background-color:#4d4d4d; border-bottom-left-radius:5px; border-bottom-right-radius:5px;"><table width="157" border="0" cellspacing="0" cellpadding="0" align="center" style="width:157px;" class="em_wrapper">
<tr>
<td align="center" valign="top" style="padding:0px 10px;"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td class="em_white" align="center" valign="top" style="font-family: 'Roboto', Arial, sans-serif; font-size:14px; line-height:17px; color:#ffffff;padding:8px 0px; "><span style="font-weight:bold;"><Name></span> <br />
<Institution></td>
</tr>
<tr>
<td align="center" valign="top" style="padding-bottom:11px;"><table width="125" border="0" cellspacing="0" cellpadding="0" align="center" style="width:125px;">
<tr>
<td align="center" valign="top" bgcolor="#007f3d" style="border-radius:5px;"><table width="125" border="0" cellspacing="0" cellpadding="0" align="center" style="width:125px;">
<tr>
<td class="em_white" align="center" valign="middle" height="56" style="height:56px; font-family: 'Roboto', Arial, sans-serif; font-size:13px; color:#ffffff; font-weight:bold; "><a href="#" target="_blank" style="text-decoration:none; color:#ffffff; display:block; line-height:16px; ">View Participation<br />
Options</a></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
<table width="328" border="0" cellspacing="0" cellpadding="0" align="right" style="width:328px;" class="em_wrapper">
<tr>
<td align="center" valign="top" class="em_ptop"><table width="328" border="0" cellspacing="0" cellpadding="0" align="center" style="width:328px;" class="em_w300">
<tr>
<td align="center" valign="top"><table width="157" border="0" cellspacing="0" cellpadding="0" align="left" style="width:157px;" class="em_wrapper">
<tr>
<td align="center" valign="top" style="border: solid 2px #9e9f9f; "><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" class="em_wrapper" >
<tr><td align="center" valign="top" bgcolor="#9e9f9f" style="background-color:#9e9f9f; color:#fff;">Feature Presenter 3<table width="157" border="0" cellspacing="0" cellpadding="0" align="center" style="width:157px;" class="em_wrapper"></table></td></tr>
<tr>
<td height="189" align="center" valign="bottom" style="height:189px;"><img src="https://tieitapp-cdn1.s3.amazonaws.com/home/tieit/domains/app.tieit.io/public_html/assets/img/email/1c43c6297227649ba26e611381191ef9.png" width="145" alt="" height="153" style="display:block; font-family:Arial, sans-serif; font-size:20px; line-height:30px; color:#000000; max-width:145px; height:153px;" class="em_g_img" border="0" /></td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="top" bgcolor="#4d4d4d" style="background-color:#4d4d4d; border-bottom-left-radius:5px; border-bottom-right-radius:5px;"><table width="157" border="0" cellspacing="0" cellpadding="0" align="center" style="width:157px;" class="em_wrapper">
<tr>
<td align="center" valign="top" style="padding:0px 10px;"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td class="em_white" align="center" valign="top" style="font-family: 'Roboto', Arial, sans-serif; font-size:14px; line-height:17px; color:#ffffff;padding:8px 0px; "><span style="font-weight:bold;"><Name></span> <br />
<Institution></td>
</tr>
<tr>
<td align="center" valign="top" style="padding-bottom:11px;"><table width="125" border="0" cellspacing="0" cellpadding="0" align="center" style="width:125px;">
<tr>
<td align="center" valign="top" bgcolor="#007f3d" style="border-radius:5px;"><table width="125" border="0" cellspacing="0" cellpadding="0" align="center" style="width:125px;">
<tr>
<td class="em_white" align="center" valign="middle" height="56" style="height:56px; font-family: 'Roboto', Arial, sans-serif; font-size:13px; color:#ffffff; font-weight:bold; "><a href="#" target="_blank" style="text-decoration:none; color:#ffffff; display:block; line-height:16px; ">View Participation<br />
Options</a></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
<td width="12" style="width:12px;" > </td>
<td align="center" valign="top"><table width="157" border="0" cellspacing="0" cellpadding="0" align="left" style="width:157px;" class="em_wrapper">
<tr>
<td align="center" valign="top" style="border: solid 2px #9e9f9f; "><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" class="em_wrapper" >
<tr><td align="center" valign="top" bgcolor="#4d4d4d" style="background-color:#9e9f9f; color:#fff;">Feature Presenter 4<table width="157" border="0" cellspacing="0" cellpadding="0" align="center" style="width:157px;" class="em_wrapper"></table></td></tr>
<tr>
<td height="189" align="center" valign="bottom" style="height:189px;"><img src="https://tieitapp-cdn1.s3.amazonaws.com/home/tieit/domains/app.tieit.io/public_html/assets/img/email/887a206a411d8ffd17674ffda4b9a939.png" width="145" alt="" height="157" style="display:block; font-family:Arial, sans-serif; font-size:20px; line-height:30px; color:#000000; max-width:145px; height:157px;" class="em_g_img" border="0" /></td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="top" bgcolor="#4d4d4d" style="background-color:#4d4d4d; border-bottom-left-radius:5px; border-bottom-right-radius:5px;"><table width="157" border="0" cellspacing="0" cellpadding="0" align="center" style="width:157px;" class="em_wrapper">
<tr>
<td align="center" valign="top" style="padding:0px 10px;"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td class="em_white" align="center" valign="top" style="font-family: 'Roboto', Arial, sans-serif; font-size:14px; line-height:17px; color:#ffffff;padding:8px 0px; "><span style="font-weight:bold;"><Name></span> <br />
<Institution></td>
</tr>
<tr>
<td align="center" valign="top" style="padding-bottom:11px;"><table width="125" border="0" cellspacing="0" cellpadding="0" align="center" style="width:125px;">
<tr>
<td align="center" valign="top" bgcolor="#007f3d" style="border-radius:5px;"><table width="125" border="0" cellspacing="0" cellpadding="0" align="center" style="width:125px;">
<tr>
<td class="em_white" align="center" valign="middle" height="56" style="height:56px; font-family: 'Roboto', Arial, sans-serif; font-size:13px; color:#ffffff; font-weight:bold; "><a href="#" target="_blank" style="text-decoration:none; color:#ffffff; display:block; line-height:16px; ">View Participation<br />
Options</a></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
<td width="14" style="width:14px;" class="em_side10"> </td>
</tr>
</table></td>
</tr>
<!-- //four column section -->
Related
Running into my regular struggles with email template designs, in particular that Gmail removes classes and thus I can't center a td via any means. Is there any way at all to change the "align" from left to center on the td with the image? Maybe I can comment in additional TDs on sides to center it, if Gmail permits it. I'm at a loss.
Template is mildly frankensteined from a template block editor.
<table class="row" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" width="280" cellspacing="0" cellpadding="0" align="left">
<tbody><tr>
<td align="left">
<table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" cellspacing="0" cellpadding="0" align="left">
<tbody><tr>
<td align="left">
<table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; width:auto !important;" cellspacing="0" cellpadding="0" align="left">
<tbody><tr>
<td class="img-responsive" width="280" align="left">
<img alt="280x200x1" src="#" style="width:100%; height:auto;" width="280" height="200">
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td align="center">
<table data-primary-order="1" data-primary-type="bgcolor" data-bgcolor="Columns" width="100%" cellspacing="0" cellpadding="0" bgcolor="#f6f6f6" align="center">
<tbody><tr>
<td align="center">
<table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; max-width:90%; width:90%;" width="90%" cellspacing="0" cellpadding="0" align="center">
<tbody><tr>
<td style="mso-line-height-rule: exactly; line-height:15px; font-size:0;" height="15"> </td>
</tr>
<tr>
<td>
<table style="width:auto !important;" cellspacing="0" cellpadding="0" align="left">
<tbody><tr>
<td data-color="Titles" data-size="Titles" data-min="14" data-max="46" style="color: #333333; font-family: 'roboto', Arial, Helvetica, sans-serif; font-weight: 400; font-size: 13px; line-height: 22.1px;" align="left">text text<br>text text</td></tr>
</tbody></table>
</td>
</tr>
<tr>
<td style="mso-line-height-rule: exactly; line-height:15px; font-size:0;" height="15"> </td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
I believe the following code should resolve your issue. When viewing the code you will see there is an element with an id of "I CHANGED FROM LEFT TO CENTER". This seemed to cause the issue, hopefully it works for you too!
<!DOCTYPE html>
<html>
<body>
<table class="row" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" width="280" cellspacing="0" cellpadding="0" align="left">
<tbody><tr>
<td align="left">
<table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" cellspacing="0" cellpadding="0" align="left">
<tbody><tr>
<td align="left">
<table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; width:auto !important;" cellspacing="0" cellpadding="0" align="left">
<tbody><tr>
<td class="img-responsive" width="280" align="left">
<img alt="280x200x1" src="#" style="width:100%; height:auto;" width="280" height="200">
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td align="center">
<table data-primary-order="1" data-primary-type="bgcolor" data-bgcolor="Columns" width="100%" cellspacing="0" cellpadding="0" bgcolor="#f6f6f6" align="center">
<tbody><tr>
<td align="center">
<table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; max-width:90%; width:90%;" width="90%" cellspacing="0" cellpadding="0" align="center">
<tbody><tr>
<td style="mso-line-height-rule: exactly; line-height:15px; font-size:0;" height="15"> </td>
</tr>
<tr>
<td>
<table style="width:auto !important;" cellspacing="0" cellpadding="0" align="center" id="I CHANGED FROM LEFT TO CENTER">
<tbody><tr>
<td data-color="Titles" data-size="Titles" data-min="14" data-max="46" style="color: #333333; font-family: 'roboto', Arial, Helvetica, sans-serif; font-weight: 400; font-size: 13px; line-height: 22.1px;" style="text-align: right;">text text<br>text text</td></tr>
</tbody></table>
</td>
</tr>
<tr>
<td style="mso-line-height-rule: exactly; line-height:15px; font-size:0;" height="15"> </td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</body>
</html>
I am creating a responsive email but for some reason on mobile the product images which are supposed to render in rows of two. When I look at the results in the browser it renders correctly, however when I view the email using my iphone's mail app the images are taking up the whole row. Here is my code...
<table align="center" bgcolor="#eaeaea" border="0" cellpadding="0" cellspacing="0" class="em_hide" style="background-color:#eaeaea; max-width:600px " width="100%">
<tbody>
<tr>
<td align="center" valign="top"><img alt="Public Goods" border="0" class="img_smaller" src="https://cdn.shopify.com/s/files/1/0838/7991/files/desktop_08_ecb55eee-cc47-4afe-9d13-64b1a3969804.jpg?1667" style="display:block; font-family: Arial, sans-serif; font-size:18px; line-height:22px; color:#000000;" width="100%" /> </td>
</tr>
</tbody>
</table>
<table align="center" bgcolor="#eaeaea" border="0" cellpadding="0" cellspacing="0" class="em_hide" style="background-color:#eaeaea; max-width:600px " width="100%">
<tbody>
<tr>
<td align="center" valign="top"><img alt="Public Goods" border="0" class="img_smaller" src="https://cdn.shopify.com/s/files/1/0838/7991/files/desktop_09_b52e842e-e42b-457b-bc61-425877ffc9fd.jpg?1667" style="display:block; font-family: Arial, sans-serif; font-size:18px; line-height:22px; color:#000000;" width="100%" /> </td>
<td align="center" valign="top"><img alt="Public Goods" border="0" class="img_smaller" src="https://cdn.shopify.com/s/files/1/0838/7991/files/desktop_10_99954987-88e5-4a04-b472-fdaa04ee8a73.jpg?1667" style="display:block; font-family: Arial, sans-serif; font-size:18px; line-height:22px; color:#000000;" width="100%" /> </td>
<td align="center" valign="top"><img alt="Public Goods" border="0" class="img_smaller" src="https://cdn.shopify.com/s/files/1/0838/7991/files/desktop_11_0c43ec27-f8df-4c31-b62c-692542e13eb7.jpg?1667" style="display:block; font-family: Arial, sans-serif; font-size:18px; line-height:22px; color:#000000;" width="100%" /> </td>
</tr>
</tbody>
</table>
<table align="center" bgcolor="#eaeaea" border="0" cellpadding="0" cellspacing="0" class="em_hide" style="background-color:#eaeaea; max-width:600px " width="100%">
<tbody>
<tr>
<td align="center" valign="top"><img alt="Public Goods" border="0" class="img_smaller" src="https://cdn.shopify.com/s/files/1/0838/7991/files/desktop_12_3c9be88e-74fd-456a-93d5-eab583cfc7bd.jpg?1682" style="display:block; font-family: Arial, sans-serif; font-size:18px; line-height:22px; color:#000000;" width="100%" /> </td>
<td align="center" valign="top"><img alt="Public Goods" border="0" class="img_smaller" src="https://cdn.shopify.com/s/files/1/0838/7991/files/desktop_13_327cfe61-d550-4e93-953d-86e70e51d1ae.jpg?1682" style="display:block; font-family: Arial, sans-serif; font-size:18px; line-height:22px; color:#000000;" width="100%" /> </td>
<td align="center" valign="top"><img alt="Public Goods" border="0" class="img_smaller" src="https://cdn.shopify.com/s/files/1/0838/7991/files/desktop_14_e81b0711-932c-460c-b716-3b43071e0671.jpg?1682" style="display:block; font-family: Arial, sans-serif; font-size:18px; line-height:22px; color:#000000;" width="100%" /> </td>
</tr>
</tbody>
</table>
<table align="center" bgcolor="#eaeaea" border="0" cellpadding="0" cellspacing="0" class="em_hide" style="background-color:#eaeaea; max-width:600px " width="100%">
<tbody>
<tr>
<td align="center" valign="top"><img alt="Public Goods" border="0" class="img_smaller" src="https://cdn.shopify.com/s/files/1/0838/7991/files/desktop_15_72a29d34-ac54-442c-ac88-81877daa8183.jpg?1682" style="display:block; font-family: Arial, sans-serif; font-size:18px; line-height:22px; color:#000000;" width="100%" /> </td>
<td align="center" valign="top"><img alt="Public Goods" border="0" class="img_smaller" src="https://cdn.shopify.com/s/files/1/0838/7991/files/desktop_16_1f847c84-0707-406a-8da9-55d533df4394.jpg?1682" style="display:block; font-family: Arial, sans-serif; font-size:18px; line-height:22px; color:#000000;" width="100%" /> </td>
<td align="center" valign="top"><img alt="Public Goods" border="0" class="img_smaller" src="https://cdn.shopify.com/s/files/1/0838/7991/files/desktop_17_ae1c4768-8ca3-4e7b-8f87-e6eb0b018011.jpg?1683" style="display:block; font-family: Arial, sans-serif; font-size:18px; line-height:22px; color:#000000;" width="100%" /> </td>
</tr>
</tbody>
</table>
<table align="center" bgcolor="#eaeaea" border="0" cellpadding="0" cellspacing="0" class="em_hide" style="background-color:#eaeaea; max-width:600px " width="100%">
<tbody>
<tr>
<td align="center" valign="top"><img alt="Public Goods" border="0" class="img_smaller" src="https://cdn.shopify.com/s/files/1/0838/7991/files/desktop_18_4d4d788e-f129-47c2-a53a-0d705d8f7c35.jpg?1686" style="display:block; font-family: Arial, sans-serif; font-size:18px; line-height:22px; color:#000000;" width="100%" /> </td>
</tr>
</tbody>
</table>
<table align="center" bgcolor="#eaeaea" border="0" cellpadding="0" cellspacing="0" class="em_hide" style="background-color:#eaeaea; max-width:600px " width="100%">
<tbody>
<tr>
<td align="center" valign="top"><img alt="Public Goods" border="0" class="img_smaller" src="https://cdn.shopify.com/s/files/1/0838/7991/files/desktop_19_76861080-70b8-4205-bc25-bf176ae8bf3a.jpg?1686" style="display:block; font-family: Arial, sans-serif; font-size:18px; line-height:22px; color:#000000;" width="100%" /> </td>
</tr>
</tbody>
</table>
<table align="center" bgcolor="#eaeaea" border="0" cellpadding="0" cellspacing="0" class="em_hide" style="background-color:#eaeaea; max-width:600px " width="100%">
<tbody>
<tr>
<td align="center" valign="top"><img alt="Public Goods" border="0" class="img_smaller" src="https://cdn.shopify.com/s/files/1/0838/7991/files/desktop_20_13a0e89b-2076-4d94-bad7-9e30f7c225e9.jpg?1686" style="display:block; font-family: Arial, sans-serif; font-size:18px; line-height:22px; color:#000000;" width="100%" /> </td>
</tr>
</tbody>
</table>
<table align="center" bgcolor="#eaeaea" border="0" cellpadding="0" cellspacing="0" class="em_show" style="background-color:#eaeaea; " width="100%">
<tbody>
<tr>
<td align="center" valign="top"><img alt="Public Goods" border="0" class="img_smaller" src="https://cdn.shopify.com/s/files/1/0838/7991/files/mobile_08_f9a97d46-cf0d-4f53-bfaf-e3b0b863709c.jpg?1687" style="display:block; font-family: Arial, sans-serif; font-size:18px; line-height:22px; color:#000000;" width="100%" /> </td>
</tr>
</tbody>
</table>
<table align="center" bgcolor="#eaeaea" border="0" cellpadding="0" cellspacing="0" class="em_show" style="background-color:#eaeaea; " width="100%">
<tbody>
<tr>
<td align="center" valign="top"><img alt="Public Goods" border="0" class="img_smaller" src="https://cdn.shopify.com/s/files/1/0838/7991/files/mobile_09_55724d89-fc89-4238-8eb2-4ed597c27681.jpg?1687" style="display:block; font-family: Arial, sans-serif; font-size:18px; line-height:22px; color:#000000;" width="100%" /> </td>
<td align="center" valign="top"><img alt="Public Goods" border="0" class="img_smaller" src="https://cdn.shopify.com/s/files/1/0838/7991/files/mobile_10_6021824e-3cb5-4ec8-b3e9-a695e5f9660f.jpg?1687" style="display:block; font-family: Arial, sans-serif; font-size:18px; line-height:22px; color:#000000;" width="100%" /> </td>
</tr>
</tbody>
</table>
<table align="center" bgcolor="#eaeaea" border="0" cellpadding="0" cellspacing="0" class="em_show" style="background-color:#eaeaea; " width="100%">
<tbody>
<tr>
<td align="center" valign="top"><img alt="Public Goods" border="0" class="img_smaller" src="https://cdn.shopify.com/s/files/1/0838/7991/files/mobile_11_98adec15-f602-48f6-a4f3-9d94730c90a2.jpg?1687" style="display:block; font-family: Arial, sans-serif; font-size:18px; line-height:22px; color:#000000;" width="100%" /> </td>
<td align="center" valign="top"><img alt="Public Goods" border="0" class="img_smaller" src="https://cdn.shopify.com/s/files/1/0838/7991/files/mobile_12_e0fd0298-7252-4019-9dde-8fcf4c7780ba.jpg?1687" style="display:block; font-family: Arial, sans-serif; font-size:18px; line-height:22px; color:#000000;" width="100%" /> </td>
</tr>
</tbody>
</table>
<table align="center" bgcolor="#eaeaea" border="0" cellpadding="0" cellspacing="0" class="em_show" style="background-color:#eaeaea; " width="100%">
<tbody>
<tr>
<td align="center" valign="top"><img alt="Public Goods" border="0" class="img_smaller" src="https://cdn.shopify.com/s/files/1/0838/7991/files/mobile_13_20f72583-9d20-4243-b4c6-54aaf6ea1903.jpg?1687" style="display:block; font-family: Arial, sans-serif; font-size:18px; line-height:22px; color:#000000;" width="100%" /> </td>
<td align="center" valign="top"><img alt="Public Goods" border="0" class="img_smaller" src="https://cdn.shopify.com/s/files/1/0838/7991/files/mobile_14_b5acf6b2-f530-4bdf-8e7d-72036474356f.jpg?1687" style="display:block; font-family: Arial, sans-serif; font-size:18px; line-height:22px; color:#000000;" width="100%" /> </td>
</tr>
</tbody>
</table>
<table align="center" bgcolor="#eaeaea" border="0" cellpadding="0" cellspacing="0" class="em_show" style="background-color:#eaeaea; " width="100%">
<tbody>
<tr>
<td align="center" valign="top"><img alt="Public Goods" border="0" class="img_smaller" src="https://cdn.shopify.com/s/files/1/0838/7991/files/mobile_15_fbd1957d-e085-4515-861e-09da9ff99a7e.jpg?1687" style="display:block; font-family: Arial, sans-serif; font-size:18px; line-height:22px; color:#000000;" width="100%" /> </td>
<td align="center" valign="top"><img alt="Public Goods" border="0" class="img_smaller" src="https://cdn.shopify.com/s/files/1/0838/7991/files/mobile_16_f63aae90-47d0-47ab-b991-a279b31e601e.jpg?1687" style="display:block; font-family: Arial, sans-serif; font-size:18px; line-height:22px; color:#000000;" width="100%" /> </td>
</tr>
</tbody>
</table>
<table align="center" bgcolor="#eaeaea" border="0" cellpadding="0" cellspacing="0" class="em_show" style="background-color:#eaeaea; " width="100%">
<tbody>
<tr>
<td align="center" valign="top"><img alt="Public Goods" border="0" class="img_smaller" src="https://cdn.shopify.com/s/files/1/0838/7991/files/mobile_17_68ea4411-d816-43e1-9f54-b41a11396339.jpg?1687" style="display:block; font-family: Arial, sans-serif; font-size:18px; line-height:22px; color:#000000;" width="100%" /> </td>
<td align="center" valign="top"><img alt="Public Goods" border="0" class="img_smaller" src="https://cdn.shopify.com/s/files/1/0838/7991/files/mobile_18_d7954e4b-8571-4fd1-9f3f-e5c08917da81.jpg?1687" style="display:block; font-family: Arial, sans-serif; font-size:18px; line-height:22px; color:#000000;" width="100%" /> </td>
</tr>
</tbody>
</table>
<table align="center" bgcolor="#eaeaea" border="0" cellpadding="0" cellspacing="0" class="em_show" style="background-color:#eaeaea; " width="100%">
<tbody>
<tr>
<td align="center" valign="top"><img alt="Public Goods" border="0" class="img_smaller" src="https://cdn.shopify.com/s/files/1/0838/7991/files/mobile_19_aebaf1a6-b8e9-499e-aee3-82e8da6ee422.jpg?1687" style="display:block; font-family: Arial, sans-serif; font-size:18px; line-height:22px; color:#000000;" width="100%" /> </td>
</tr>
</tbody>
</table>
<table align="center" bgcolor="#eaeaea" border="0" cellpadding="0" cellspacing="0" class="em_show" style="background-color:#eaeaea; " width="100%">
<tbody>
<tr>
<td align="center" valign="top"><img alt="Public Goods" border="0" class="img_smaller" src="https://cdn.shopify.com/s/files/1/0838/7991/files/mobile_20_153f2f5a-ccb0-4cae-8234-cf3defdab72b.jpg?1687" style="display:block; font-family: Arial, sans-serif; font-size:18px; line-height:22px; color:#000000;" width="100%" /> </td>
</tr>
</tbody>
</table>
<table align="center" bgcolor="#eaeaea" border="0" cellpadding="0" cellspacing="0" class="em_show" style="background-color:#eaeaea; " width="100%">
<tbody>
<tr>
<td align="center" valign="top"><img alt="Public Goods" border="0" class="img_smaller" src="https://cdn.shopify.com/s/files/1/0838/7991/files/mobile_21_e8638b6a-4df2-4684-a3ed-b3d6a7df9e72.jpg?1687" style="display:block; font-family: Arial, sans-serif; font-size:18px; line-height:22px; color:#000000;" width="100%" /> </td>
</tr>
</tbody>
</table>
This is because is a block element. It will always use the whole available widtth.
You can write something like
IMG
I'm trying to align 3 text boxes horizontally, would love some advice/help!
These should all be in a row however it is stacking in a horizontal manner.
I belive it has something to do with the td and table tags.
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" class="center">
<tbody>
<td align="left" style="color: #808488; font-size: 10px; font-family:Arial; padding:0px 0px 0px 0px">
<a href="" style="color:#ffffff; text-decoration:none">
<table width="150" border="0" cellspacing="0" cellpadding="0" bgcolor="#00c0a5" style="border-radius:4px">
<tbody>
<td align="center" style="padding:15px 10px 15px 10px; color:#ffffff; font-size:10px; font-family:Arial">Repayment Calculator</td>
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" class="center">
<td align="middle" style="color: #808488; font-size: 10px; font-family:Arial; padding:0px 0px 0px 0px">
<a href="" style="color:#ffffff; text-decoration:none">
<table width="150" border="0" cellspacing="0" cellpadding="0" bgcolor="#00c0a5" style="border-radius:4px">
<td align="center" style="padding:15px 10px 15px 10px; color:#ffffff; font-size:10px; font-family:Arial">Borrowing Power Calculator</td>
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" class="center">
<tbody>
<td align="right" style="color: #808488; font-size: 10px; font-family:Arial; padding:0px 0px 0px 0px">
<a href="" style="color:#ffffff; text-decoration:none">
<table width="150" border="0" cellspacing="0" cellpadding="0" bgcolor="#00c0a5" style="border-radius:4px">
<tbody>
<td align="center" style="padding:15px 10px 15px 10px; color:#ffffff; font-size:10px; font-family:Arial">Property Report</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table></td>
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" class="center">
<tbody>
<td align="left" style="color: #808488; font-size: 10px; font-family:Arial; padding:0px 0px 0px 0px; width:33%;">
<a href="" style="color:#ffffff; text-decoration:none">
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#00c0a5" style="border-radius:4px">
<tbody>
<tr>
<td align="center" style="padding:15px 10px 15px 10px; color:#ffffff; font-size:10px; font-family:Arial">Repayment Calculator</td>
</tr>
</tbody></table>
</td>
<td align="left" style="color: #808488; font-size: 10px; font-family:Arial; padding:0px 0px 0px 0px; width:33%;">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="center">
<tbody>
<tr>
<td align="middle" style="color: #808488; font-size: 10px; font-family:Arial; padding:0px 0px 0px 0px">
<a href="" style="color:#ffffff; text-decoration:none">
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#00c0a5" style="border-radius:4px">
<tbody>
<tr>
<td align="center" style="padding:15px 10px 15px 10px; color:#ffffff; font-size:10px; font-family:Arial">Borrowing Power Calculator</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
<td style="width:33%;">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="center">
<tbody><tr>
<td align="right" style="color: #808488; font-size: 10px; font-family:Arial; padding:0px 0px 0px 0px">
<a href="" style="color:#ffffff; text-decoration:none">
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#00c0a5" style="border-radius:4px">
<tbody>
<tr>
<td align="center" style="padding:15px 10px 15px 10px; color:#ffffff; font-size:10px; font-family:Arial">Property Report</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody>
</table>
SOLVED: Needed to declare a height on the main image that is nested in the table.
QUESTION: I have two tables that I'm trying to stack on top of one another in an html email but am getting a gap between them in Outlook 2016 only. The red box should touch the grey horizontal line. See picture below. All other version of Outlook are good. I've removed cell padding, borders, and spacing from all tables so I'm at a loss on this one. I also have this table aligned top. Any tricks to getting this to work in MSO 2016?
<table align="right" width="190" border="0" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt; mso-table-rspace:0pt; margin: 0 auto; border-collapse:collapse;" bgcolor="#6e7171">
<tr>
<td align="center" width="1">
<!-- margin SPACER-->
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
<tr>
<td width="1" height="1" style="mso-line-height-rule:exactly; line-height:1px; font-size:0;">
<img src="images/sp.gif" width="1" height="1" alt="" border="0" style="display:block;" />
</td>
</tr>
</table>
<!-- /margin SPACER-->
</td>
<td align="center" bgcolor "#6e7171" class="hideMobile" width="188" align="left" class="outlookpadding" valign="top">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
<tr>
<td width="1" height="1" style="mso-line-height-rule:exactly; line-height:1px; font-size:0;">
<img src="images/sp.gif" width="1" height="1" alt="" border="0" style="display:block;" />
</td>
</tr>
</table>
<table class="hideMobile" bgcolor "#6e7171" align="center" width="188" border="0" cellspacing="0" cellpadding="0" style="mso-table-lspace:0pt; mso-table-rspace:0pt; margin: 0 auto; border-collapse:collapse; margin: 0 auto;">
<tr>
<td align="center">
<table width="188" cellpadding="0" class="deviceWidth" cellspacing="0" border="0" bgcolor="#ffffff" align="center" style="border-collapse: collapse;">
<tr>
<td>
<a target="_blank" href="#"><img src="images/laptop.jpg" alt="Using laptop trackpad" width="190" style="display: block; width: 190px; " align="center"></a>
</td>
</tr>
<tr>
<td class="showMobile hideyahoo" valign="top" align="right" bgcolor="#ffffff" style="display: block; text-align: left; font-size: 14px; line-height: 18px; font-family:Arial, Helvetica, sans-serif;color:#e51b3f; mso-line-height-rule: exactly; padding-right: 10px; padding-left: 10px; padding-top: 18px; font-weight: bold;">Ask the right questions.</td>
</tr>
<tr>
<td class="showMobile hideyahoo" valign="top" align="right" display="block" bgcolor="#ffffff" style="text-align: left; font-size: 13px; line-height: 18px; font-family:Arial, Helvetica, sans-serif;color:#514d4d; mso-line-height-rule: exactly; padding-right: 10px; padding-left: 10px; padding-bottom: 15px; padding-top: 15px; ">Having an honest discussion with your doctor can help you take a more active role in your care. These conversation starters can help you know what to ask.</td>
</tr>
</table>
</td>
<td width="1">
<!-- margin -->
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
<tr>
<td width="1" height="1" style="mso-line-height-rule:exactly; line-height:1px; font-size:0;">
<img src="images/sp.gif" width="1" height="1" alt="" border="0" style="display:block;" />
</td>
</tr>
</table>
<!-- /margin -->
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
<tr>
<td width="1" height="1" style="mso-line-height-rule:exactly; line-height:1px; font-size:0;">
<img src="images/sp.gif" width="1" height="1" alt="" border="0" style="display:block;" />
</td>
</tr>
</table>
</td>
</tr>
</table>
<table align="right" valign="top" border="0" cellspacing="0" cellpadding="0" bgcolor="#ed1849" height="49" width="192" style="padding: 0; height: 49px; margin: 0 auto; border-collapse: collapse; display">
<tr>
<td style="padding-left: 10px;" height="44">
<table valign="top" border="0" cellspacing="0" cellpadding="0" bgcolor="#ed1849" height="44" style="border-collapse: collapse;">
<tr>
<td border="0" cellspacing="0" cellpadding="0" width="100%" align="center" valign="bottom" style="text-align: left; color: #ffffff; background-color: #ed1849; font-family:Arial, Helvetica, sans-serif; font-weight: bold; font-size: 13px; mso-line-height-rule: exactly;">GET QUESTIONS</td>
</tr>
<tr>
<td border="0" cellspacing="0" cellpadding="0" bgcolor="#ed1849">
<table border="0" cellspacing="0" cellpadding="0" bgcolor="#ed1849">
<tr>
<td border="0" cellspacing="0" cellpadding="0" align="center" valign="middle" style="text-align: left; color: #ffffff; background-color: #ed1849; font-family:Arial, Helvetica, sans-serif; font-weight: bold; font-size: 13px; mso-line-height-rule: exactly;">FOR YOUR DOCTOR</td>
<td height="11" bgcolor="#ed1849" align="left" valign="middle" style="padding-left: 7px; vertical-align: middle; font-size: 0;"><img valign="middle" width="8" height="11" style=" display: block; width: 8px; height:11px;" src="images/arrow.jpg" alt="arrow"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
Have your tried using conditional comments?
For Outlook 2016 it should be something like the following:
<!--[if mso 16]>some outlook 2016 only stuff<![endif]-->
I started making a email from a default Mailchimp layout, the "1:3 Column - Full Width" one.
When testing it on diferent devices, I realized that on mobile email client apps (Gmail, Yahoo, etc.), the area marked below is not displayed full width, when should.
I'm unable to find the mistake, I didn't touch any of the responsive code from the default layout.
-Thanks for your time.
Here is the code:
.templateContainer {
max-width: 600px !important;
}
.mcnImageCalendar {
max-width: 100% !important;
height: auto;
display: block;
}
#media only screen and (min-width:768px) {
.templateContainer {
width: 600px !important;
}
}
#media only screen and (max-width: 480px) {
.columnWrapper {
max-width: 100% !important;
width: 100% !important;
}
}
<table>
<tbody>
<tr>
<td align="center" valign="top" class="templateColumns">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="templateContainer">
<tr>
<td valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="200" class="columnWrapper">
<tr>
<td valign="top" class="columnContainer">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnCaptionBlock">
<tbody class="mcnCaptionBlockOuter">
<tr>
<td class="mcnCaptionBlockInner" valign="top" style="padding:9px;">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mcnCaptionBottomContent">
<tbody>
<tr>
<td class="mcnCaptionBottomImageContent" align="center" valign="top" style="padding:0 9px 9px 9px;">
<img alt="" src="https://www.w3schools.com/css/img_fjords.jpg" style="max-width:602px;" class="mcnImage mcnImageCalendar">
</td>
</tr>
<tr>
<td class="mcnTextContent" valign="top" style="font-family: 'Open Sans', Arial, sans-serif; font-size: 14px;padding:0 9px 0 9px;text-align: justify;">
<strong>19 July</strong>
<br>Lorem ipsum
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnButtonBlock" style="min-width:100%;">
<tbody class="mcnButtonBlockOuter">
<tr>
<td style="padding-top:0;padding-right:18px;padding-bottom:18px;padding-left:18px;" valign="top" align="center" class="mcnButtonBlockInner">
<table align="center" width="100%" bgcolor="#01a4e2" border="0" cellpadding="0" cellspacing="0" class="btn_info" style="border-radius:25px; max-width: 175px;">
<tbody>
<tr>
<td align="center" height="32" style="color:#ffffff;font-size:14px;font-family:Ubuntu, Calibri, sans-serif;font-weight:400;line-height:20.4px;">
<div class="editable_text" style="line-height:20.4px; border-radius:25px;">
<a href="#" style="color:#fff;text-decoration:none;padding:8px 16px;border-radius:25px; display: block;">
<span class="text_container" style="font-family: 'Open Sans', Arial, sans-serif;">+ info</span>
</a>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<table align="left" border="0" cellpadding="0" cellspacing="0" width="200" class="columnWrapper">
<tr>
<td valign="top" class="columnContainer">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnCaptionBlock">
<tbody class="mcnCaptionBlockOuter">
<tr>
<td class="mcnCaptionBlockInner" valign="top" style="padding:9px;">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mcnCaptionBottomContent">
<tbody>
<tr>
<td class="mcnCaptionBottomImageContent" align="center" valign="top" style="padding:0 9px 9px 9px;">
<img alt="" src="https://www.w3schools.com/css/img_fjords.jpg" style="max-width:602px;" class="mcnImage mcnImageCalendar">
</td>
</tr>
<tr>
<td class="mcnTextContent" valign="top" style="font-family: 'Open Sans', Arial, sans-serif; font-size: 14px;padding:0 9px 0 9px;text-align: justify;">
<strong>19 July</strong>
<br>Lorem ipsum
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnButtonBlock" style="min-width:100%;">
<tbody class="mcnButtonBlockOuter">
<tr>
<td style="padding-top:0;padding-right:18px;padding-bottom:18px;padding-left:18px;" valign="top" align="center" class="mcnButtonBlockInner">
<table align="center" width="100%" bgcolor="#01a4e2" border="0" cellpadding="0" cellspacing="0" class="btn_info" style="border-radius:25px; max-width: 175px;">
<tbody>
<tr>
<td align="center" height="32" style="color:#ffffff;font-size:14px;font-family:Ubuntu, Calibri, sans-serif;font-weight:400;line-height:20.4px;">
<div class="editable_text" style="line-height:20.4px; border-radius:25px;">
<a href="#" style="color:#fff;text-decoration:none;padding:8px 16px;border-radius:25px; display: block;">
<span class="text_container" style="font-family: 'Open Sans', Arial, sans-serif;">+ info</span>
</a>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<table align="left" border="0" cellpadding="0" cellspacing="0" width="200" class="columnWrapper">
<tr>
<td valign="top" class="columnContainer">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnCaptionBlock">
<tbody class="mcnCaptionBlockOuter">
<tr>
<td class="mcnCaptionBlockInner" valign="top" style="padding:9px;">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mcnCaptionBottomContent">
<tbody>
<tr>
<td class="mcnCaptionBottomImageContent" align="center" valign="top" style="padding:0 9px 9px 9px;">
<img alt="" src="https://www.w3schools.com/css/img_fjords.jpg" style="max-width:602px;" class="mcnImage mcnImageCalendar">
</td>
</tr>
<tr>
<td class="mcnTextContent" valign="top" style="font-family: 'Open Sans', Arial, sans-serif; font-size: 14px;padding:0 9px 0 9px;text-align: justify;">
<strong>19 July</strong>
<br>Lorem ipsum
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnButtonBlock" style="min-width:100%;">
<tbody class="mcnButtonBlockOuter">
<tr>
<td style="padding-top:0;padding-right:18px;padding-bottom:18px;padding-left:18px;" valign="top" align="center" class="mcnButtonBlockInner">
<table align="center" width="100%" bgcolor="#01a4e2" border="0" cellpadding="0" cellspacing="0" class="btn_info" style="border-radius:25px; max-width: 175px;">
<tbody>
<tr>
<td align="center" height="32" style="color:#ffffff;font-size:14px;font-family:Ubuntu, Calibri, sans-serif;font-weight:400;line-height:20.4px;">
<div class="editable_text" style="line-height:20.4px; border-radius:25px;">
<a href="#" style="color:#fff;text-decoration:none;padding:8px 16px;border-radius:25px; display: block;">
<span class="text_container" style="font-family: 'Open Sans', Arial, sans-serif;">+ info</span>
</a>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
Try following code, u need to mention min-width and max-width
.templateContainer {
max-width: 600px !important;
}
.mcnImageCalendar {
max-width: 100% !important;
height: auto;
display: block;
}
#media only screen and (max-width: 768px) and (min-width: 481px) {
.templateContainer {
width: 600px !important;
}
}
#media only screen and (max-width: 480px) {
.columnWrapper {
max-width: 100% !important;
width: 100% !important;
}
}
<table>
<tbody>
<tr>
<td align="center" valign="top" class="templateColumns">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="templateContainer">
<tr>
<td valign="top">
<table align="left" border="0" cellpadding="0" cellspacing="0" width="200" class="columnWrapper">
<tr>
<td valign="top" class="columnContainer">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnCaptionBlock">
<tbody class="mcnCaptionBlockOuter">
<tr>
<td class="mcnCaptionBlockInner" valign="top" style="padding:9px;">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mcnCaptionBottomContent">
<tbody>
<tr>
<td class="mcnCaptionBottomImageContent" align="center" valign="top" style="padding:0 9px 9px 9px;">
<img alt="" src="https://www.w3schools.com/css/img_fjords.jpg" style="max-width:602px;" class="mcnImage mcnImageCalendar">
</td>
</tr>
<tr>
<td class="mcnTextContent" valign="top" style="font-family: 'Open Sans', Arial, sans-serif; font-size: 14px;padding:0 9px 0 9px;text-align: justify;">
<strong>19 July</strong>
<br>Lorem ipsum
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnButtonBlock" style="min-width:100%;">
<tbody class="mcnButtonBlockOuter">
<tr>
<td style="padding-top:0;padding-right:18px;padding-bottom:18px;padding-left:18px;" valign="top" align="center" class="mcnButtonBlockInner">
<table align="center" width="100%" bgcolor="#01a4e2" border="0" cellpadding="0" cellspacing="0" class="btn_info" style="border-radius:25px; max-width: 175px;">
<tbody>
<tr>
<td align="center" height="32" style="color:#ffffff;font-size:14px;font-family:Ubuntu, Calibri, sans-serif;font-weight:400;line-height:20.4px;">
<div class="editable_text" style="line-height:20.4px; border-radius:25px;">
<a href="#" style="color:#fff;text-decoration:none;padding:8px 16px;border-radius:25px; display: block;">
<span class="text_container" style="font-family: 'Open Sans', Arial, sans-serif;">+ info</span>
</a>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<table align="left" border="0" cellpadding="0" cellspacing="0" width="200" class="columnWrapper">
<tr>
<td valign="top" class="columnContainer">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnCaptionBlock">
<tbody class="mcnCaptionBlockOuter">
<tr>
<td class="mcnCaptionBlockInner" valign="top" style="padding:9px;">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mcnCaptionBottomContent">
<tbody>
<tr>
<td class="mcnCaptionBottomImageContent" align="center" valign="top" style="padding:0 9px 9px 9px;">
<img alt="" src="https://www.w3schools.com/css/img_fjords.jpg" style="max-width:602px;" class="mcnImage mcnImageCalendar">
</td>
</tr>
<tr>
<td class="mcnTextContent" valign="top" style="font-family: 'Open Sans', Arial, sans-serif; font-size: 14px;padding:0 9px 0 9px;text-align: justify;">
<strong>19 July</strong>
<br>Lorem ipsum
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnButtonBlock" style="min-width:100%;">
<tbody class="mcnButtonBlockOuter">
<tr>
<td style="padding-top:0;padding-right:18px;padding-bottom:18px;padding-left:18px;" valign="top" align="center" class="mcnButtonBlockInner">
<table align="center" width="100%" bgcolor="#01a4e2" border="0" cellpadding="0" cellspacing="0" class="btn_info" style="border-radius:25px; max-width: 175px;">
<tbody>
<tr>
<td align="center" height="32" style="color:#ffffff;font-size:14px;font-family:Ubuntu, Calibri, sans-serif;font-weight:400;line-height:20.4px;">
<div class="editable_text" style="line-height:20.4px; border-radius:25px;">
<a href="#" style="color:#fff;text-decoration:none;padding:8px 16px;border-radius:25px; display: block;">
<span class="text_container" style="font-family: 'Open Sans', Arial, sans-serif;">+ info</span>
</a>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<table align="left" border="0" cellpadding="0" cellspacing="0" width="200" class="columnWrapper">
<tr>
<td valign="top" class="columnContainer">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnCaptionBlock">
<tbody class="mcnCaptionBlockOuter">
<tr>
<td class="mcnCaptionBlockInner" valign="top" style="padding:9px;">
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mcnCaptionBottomContent">
<tbody>
<tr>
<td class="mcnCaptionBottomImageContent" align="center" valign="top" style="padding:0 9px 9px 9px;">
<img alt="" src="https://www.w3schools.com/css/img_fjords.jpg" style="max-width:602px;" class="mcnImage mcnImageCalendar">
</td>
</tr>
<tr>
<td class="mcnTextContent" valign="top" style="font-family: 'Open Sans', Arial, sans-serif; font-size: 14px;padding:0 9px 0 9px;text-align: justify;">
<strong>19 July</strong>
<br>Lorem ipsum
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnButtonBlock" style="min-width:100%;">
<tbody class="mcnButtonBlockOuter">
<tr>
<td style="padding-top:0;padding-right:18px;padding-bottom:18px;padding-left:18px;" valign="top" align="center" class="mcnButtonBlockInner">
<table align="center" width="100%" bgcolor="#01a4e2" border="0" cellpadding="0" cellspacing="0" class="btn_info" style="border-radius:25px; max-width: 175px;">
<tbody>
<tr>
<td align="center" height="32" style="color:#ffffff;font-size:14px;font-family:Ubuntu, Calibri, sans-serif;font-weight:400;line-height:20.4px;">
<div class="editable_text" style="line-height:20.4px; border-radius:25px;">
<a href="#" style="color:#fff;text-decoration:none;padding:8px 16px;border-radius:25px; display: block;">
<span class="text_container" style="font-family: 'Open Sans', Arial, sans-serif;">+ info</span>
</a>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
First - not every email clients use media queries. For example gmail don't. So Your email won't be responsive on gmail and many email clients like Outlook etc. I create my last email template for shop about year ago so do not remember every behavior but this is great tool https://litmus.com .
And what I remember - use only inline styles and tables in template. Good luck because creating email template is a terrible work :)