Email drag and drop module not displaying correctly for Outlook 16

SOLVE
thinkbliss
Member

Hello,

 

I hope someone can help witht this. I've built a ton of emails in the past but having difficulty getting Outlook 16 to render my email correctly. It's fine in other clients. First, the image won't render. I'm using [if (gte mso 9)|(IE)] conditional statements but it won't show. Next, I'm using a responsive code but the module blows out and goes outside of the email frame. I'm hoping someone knows the magic Outlook trick.

Module code:Screen Shot 2021-05-28 at 8.37.14 AM.png

 

	<style type="text/css" 
	  data-hse-inline-css="true">
	 .email-wrapper{
	   padding: 0 20px;
			line-height: 110%;
			margin-bottom: 16px;
		}
		.border-box-module p {
			line-height: 150%;
			font-size: 16px;
			margin-bottom: 12px;
		}
	  img {
		display: block;
	  }
	  a {
		text-decoration: none;
	  }
	
	</style> 
	
	<table class="email-wrapper" align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%">
	  <tr>
		<td align="center">
		  <table cellpadding="0" cellspacing="0" style="border-spacing:0 !important;">
			
			
			<!--[if (gte mso 9)|(IE)]>
			  <tr>
				<td algin="center">
			  
			  <table role="presentation" cellspacing="0" cellpadding="0" border="0">
			  
			  <tr>
			  <td align="center" valign="top" style="border-collapse:collapse; mso-line-height-rule:exactly; font-family:Helvetica, Arial, sans-serif; color:#000000; word-break:break-word; text-align:center; padding:10px 40px; font-size:0px">
			  <![endif]--> 
			  <div>

				  <img style="max-width:520px; font-size:16px" src="{{ module.promo_image.src }}" alt="{{ module.promo_image.alt }}">
				</div>
			  

			  <!--[if (gte mso 9)|(IE)]>
			  </table>
			  

				</td>
			  </tr>
			<![endif]-->
        <tr><td>

					  <table cellpadding="0" cellspacing="0" style="border-spacing:0 !important;">
						<tr>
						  <td align="center" style="font-family:Helvetica, Arial, sans-serif; padding:10px 40px; font-size:24px !important; font-weight:normal; line-height: 1.5em; color:#5051db; ">
							  {% inline_text field="purple_subhead" value="{{ module.purple_subhead }}" %}
						  </td>
						</tr>
					  </table>
          </td></tr>

	
				  <tr>
					<td align="left">
					  <table cellpadding="0" cellspacing="0" style="border-spacing:0 !important;">
						<tr>
						  <td style="font-family:Helvetica, Arial, sans-serif; font-size:18px; line-height: 150%; color:#000000; padding:10px 40px;">
							  <p>
								{% inline_text field="basic_text_large" value="{{ module.basic_text_large }}" %}
							  </p>
						  </td>
						</tr>
					  </table>
					</td>
				  </tr>
			
				  <tr>
					<td>
					  <table cellpadding="0" cellspacing="0" style="border-spacing:0 !important;">
						<tr>
						  <td style="font-family:Helvetica, Arial, sans-serif; padding:20px 40px 10px; font-size:15px; font-weight: bold; line-height: 1.5em; color:#000000;">
								{% inline_text field="small_bold_subheader" value="{{ module.small_bold_subheader }}" %}
						  </td>
						</tr>
					  </table>
					</td>
				  </tr>
			
				  <tr>
					<td>
					  <table cellpadding="0" cellspacing="0" style="border-spacing:0 !important;">
						<tr>
						  <td style="font-family:Helvetica, Arial, sans-serif; font-size:15px; line-height:150%; color:#000000; padding:0 40px 20px; ">
											<ul>
					   <li>{% inline_text field="list_group.issue_list_item_1" value="{{ module.list_group.issue_list_item_1 }}" %}</li>
					   <li>{% inline_text field="list_group.issue_list_item_2" value="{{ module.list_group.issue_list_item_2 }}" %}</li>
					   <li>{% inline_text field="list_group.issue_list_item_3" value="{{ module.list_group.issue_list_item_3 }}" %}</li>
					   <li>{% inline_text field="list_group.issue_list_item_4" value="{{ module.list_group.issue_list_item_4 }}" %}</li>			
					 </ul>
						  </td>
						</tr>
					  </table>
					</td>
				  </tr>
        
        
        
			
				  <tr>
					<td style="font-family:Helvetica, Arial, sans-serif; padding: 10px 20px">
					  <table align="left" border="0" cellpadding="0" cellspacing="0" style="border-spacing:0 !important;">
						<tr>
						 
						  <td align="center" valign="middle" bgcolor="#3887f6" role="presentation" style="border-collapse:collapse; mso-line-height-rule:exactly; font-family:Helvetica, Arial, sans-serif; font-size:15px; color:#000000; word-break:break-word; border-radius:0px; cursor:auto; background-color:#3887f6">
                <a href="{{ module.button_group.button_url.href }}" target="_blank" style="color:#00a4bd; mso-line-height-rule:exactly; font-size:16px; font-family:Helvetica,Arial,sans-serif; Margin:0; text-transform:none; text-decoration:none; padding:12px 18px; display:block" data-hs-link-id="0">
                  <strong style="color:#ffffff;font-weight:normal;text-decoration:none;font-style:normal;">{% inline_text field="button_group.button_text" value="{{ module.button_group.button_text }}" %}</strong>
                </a>
              </td>
						</tr>
					  </table>
					</td>
				  </tr>
	  </table>
		</td>
	</tr>
</table>
					  
	
	  

 



0 Upvotes
1 Accepted solution

Accepted Solutions
DanielSanchez
Solution
Key Advisor

Hi @thinkbliss ,

 

Try to set pixel width values for your blocks. % May have problems with Outlook. I think it's also good to use both width as an attribute of the tag and also as inline CSS. Thus it reinforces the desired size if Outlook does not interpret any of them well.

 

Did this post help solve your problem? If so, please mark it as a solution.

Best regards!

View solution in original post

0 Upvotes
3 Replies 3
DanielSanchez
Solution
Key Advisor

Hi @thinkbliss ,

 

Try to set pixel width values for your blocks. % May have problems with Outlook. I think it's also good to use both width as an attribute of the tag and also as inline CSS. Thus it reinforces the desired size if Outlook does not interpret any of them well.

 

Did this post help solve your problem? If so, please mark it as a solution.

Best regards!

View solution in original post

0 Upvotes
thinkbliss
Member

Thanks Daniel. Client doesn't want forced widths on the tds. But here's a weird thing. When I hard code the image instead of using the module snippet the image does show up - still blows up the page but it displays. When I use the module snippet, it doesn't show. Is there any special tags that need to be used when using a custom module? Again, all the other clients are fine.

thinkbliss
Member

Ok I think I figure out. You're right about Outlook wanting a specific width so I added to the image tag. I'll make a conditional mso statement so that it doesn't those in the other mobile clients because it ruins the responsiveness. Thank you for leading me in the right direction.