Rich text email for viewing in Gmail

[LoraBergeron]

Hello,

I currently have a smart rich text module in my weekly customer email that is not rendering correctly when viewed on mobile in Gmail app. My developer help is on vacation this week but told me 2 weeks ago that it was a "gmail issue" and he would have to research it.  And then he went on vacation.  

Could someone please help me figure this out?  Here is my code and what it looks like in Gmail.  How do I get the text and image to center on the mobile email in Gmail?
Thanks for ANY help you can provide.

<style type="text/css">
@media screen and (max-width: 600px) {

.email-container {
width: 100% !important;
}

/* What it does: Forces elements to resize to the full width of their container. Useful for resizing images beyond their max-width. */
.fluid,
.fluid-centered {
max-width: 100% !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
width: 100% !important;
}
/* And center justify these ones. */
.fluid-centered {
margin-left: auto !important;
margin-right: auto !important;
}

/* What it does: Forces table cells into full-width rows. */
.stack-column,
.stack-column-center {
display: block !important;
width: 100% !important;
max-width: 520px !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;
}
.center-on-narrow {
}

}

</style>
<table width="100%" align="center">
<td width="100%" class="stack-column-center"><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="center-on-narrow">
<tr>

<td width="100%"><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td dir="ltr" valign="top" style="padding: 0 10px;"><img src="https://f.hubspotusercontent10.net/hubfs/8139412/Logos/dotted%20line.png" alt="alt_text" width="498" class="center-on-narrow" border="0" style="width: 100%; max-width: 498px; height: auto;"></td>
</tr>
</table></td>
</tr>
</table></td>
</table>

<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td><h2 style=" font-family: arial, helvetica, sans-serif; font-size: 20px; text-align: center; mso-height-rule: exactly; line-height: 100%; font-style: normal; font-weight: normal; margin-bottom: 18px;"> <br>Save Big with <span style="color: #2372b9;">Constellation Rewards <span style="color: #000000;"></span></span></h2>
</td>
</tr>
</table>

<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="stack-column-center"><table align="left" border="0" cellpadding="0" cellspacing="0" width="70%" class="stack-column-center">
<tr>
<td dir="ltr" valign="top" style="font-family: sans-serif; font-size: 13px; mso-height-rule: exactly; line-height: 20px; text-align: left;" class="center-on-narrow">Sign in to <a href="https://www.constellationrewards.com/" style="font-weight: bold;" rel="noopener"><span style="color: #2372b9;">Constellation Rewards</span></a><span style="font-weight: normal;"> today to use your Reward Dollars to save on hundreds of gift cards like L.L. Bean, Macy’s, Office Depot, Old Navy, and more!  Save now on dining, travel, entertainment, shopping and more. Log in to start saving today!<br><br></span>

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a href=" http://constellationrewards.com">
<img style="margin-bottom: 30px;" src="https://f.hubspotusercontent10.net/hubfs/8139412/Constellation%20Rewards/LogIntoConstellationRewards..." width="250" alt="alt_text" border="0" class="center-on-narrow"></a></td>
</tr>
</table>

</td>

</tr>
</table>
<table align="right" border="0" cellpadding="0" cellspacing="0" width="30%" class="stack-column-center">
<tr align="center">
<td valign="top" dir="ltr" ><img class="fluid-centered" src="https://f.hubspotusercontent10.net/hubfs/8139412/Constellation%20Rewards/gift%20card%202.png" width="150" alt="alt_text" border="0"></td>
</tr>
</table></td>
</tr>
</table>
<p>
&nbsp;<br>
</p>

[Indra]

@LoraBergeron try wrapping your style with require_css. This should place your styling into the head like this:

{% require_css %}
<style>
.class{
  /* your styling */
}
</style>
{% end_require_css %}

You can also check the hs-inline-css option at the article Email template markup and look at hs-inline-css and data-hse-inline-css. to add style elements inline. Ofcourse this won't do media queries since you can't do inline media queries on elements.

[LoraBergeron]

Replying again.  I guess Hubspot doesn't have any answer for my issue??

[LoraBergeron]

Hi,

I posted my result of doing what you suggested last week and the mobile formatting still looks incorrect in gmail.  Is there no solution for this?  Please let me know.  Thanks.

[LoraBergeron]

Ok, thank you.  I tried this and it did not work.  Here is the result and the code:

<!doctype html>
<html>
<style type="text/css" id="hs-inline-css">
@media screen and (max-width:560px) {

.email-container {
width: 100% !important;
}

/* What it does: Forces elements to resize to the full width of their container. Useful for resizing images beyond their max-width. */
.fluid,
.fluid-centered {
max-width: 100% !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
width: 100% !important;

}
/* And center justify these ones. */
.fluid-centered {
margin-left: auto !important;
margin-right: auto !important;
}

/* 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;
}
/* 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;
}
.center-on-narrow {
}

}

</style>
<table width="100%" align="center">
<td width="100%" class="stack-column-center"><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="center-on-narrow">
<tr>
<td width="100%"><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td dir="ltr" valign="top" style="padding: 0 10px;"><img src="https://f.hubspotusercontent10.net/hubfs/8139412/Logos/dotted%20line.png" alt="alt_text" width="498" class="center-on-narrow" border="0" style="width: 100%; max-width: 498px; height: auto;"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</table>

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr align="center">
<td><h2 style="color: #000000; font-family: arial, helvetica, sans-serif; font-size: 20px; font-style: normal; font-weight: normal;"><br>Save Big with <span style="color: #2372b9;">Constellation Rewards <span style="color: #000000;"></span></span></h2></td>
</tr>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="stack-column-center"><br>
<table align="left" border="0" cellpadding="0" cellspacing="0" width="70%" class="fluid-centered">
<tr>
<td dir="ltr" valign="top" style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; text-align: center;" class="center-on-narrow">Sign in to <a href="https://www.constellationrewards.com/" style="font-weight: bold;" rel="noopener"><span style="color: #2372b9;">Constellation Rewards</span></a><span style="font-weight: normal;"> today to use your Reward Dollars to save on hundreds of gift cards like L.L. Bean, Macy’s, Office Depot, Old Navy, and more!  Save now on dining, travel, entertainment, shopping and more. Log in to start saving today!</span><br><br>

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<div align="center"><a href=" http://constellationrewards.com">
<img style="margin-bottom: 30px;" src="https://f.hubspotusercontent10.net/hubfs/8139412/Constellation%20Rewards/LogIntoConstellationRewards..." width="250" alt="Log In to Constellation Rewards" border="0" class="center-on-narrow"></a></div>
</td>
</tr>
</table>

</td>
</tr>
</table>

<table width="25%" border="0" align="right" cellpadding="0" cellspacing="0" class="stack-column-center">
<tr align="center">
<td valign="top" dir="ltr" class="stack-column-center" ><div align="center"><img class="fluid-centered" src="https://f.hubspotusercontent10.net/hubfs/8139412/Constellation%20Rewards/gift%20card%202.png" width="150" alt="" border="0"></div></td>
</tr>
</table>
</td>
</tr>
</table>
<p>
&nbsp;<br>
</p>
</html>

[alyssamwilie]

@LoraBergeron You can't put a <head> tag in the body of the email which is where an HTML module is rendering it's code.  As I said, you can't edit the head in a drag and drop email (which from this screen shot shows that's what it is) so there's nothing that can be done to fix it.

[LoraBergeron]

Hi Alyssa,

I just tried what Indra suggested and I posted the results below.  Are you saying that there is nothing that can be done in the drag and drop format, and this email will never look correct  in gmail?

Thanks for your help

[LoraBergeron]

ok, I added it to the head and I got this error.  I tested it and it looks the same as the example above.

[alyssamwilie]

@LoraBergeron It looks like your center styling is in the body of the code. Gmail strips out any styling that's not in the <head></head>. Move all your <style> blocks to the <head> and it should work. If this is a Drag and Drop email (not design manager) then there's nothing you can do about that because Hubspot does not give us access to the <head> (which I hope at some point they do).

[Indra]

Hi @LoraBergeron,

You should change your media query from max-width:500px to max-width:559px.

This is because the table itself has a value of 70% by itself set as an table attribute.

Hope this solved your problem.

[LoraBergeron]

No, that did not help.  We aren't able to figure out why the email content isn't rendering correctly in Gmail.  The code is there but it doesn't look right.  No one at my company can figure out why.  I'm pasting to code here and attaching what it looks like on mobile in gmail.  

Could you please look at the code and make sure we aren't doing something wrong?

<style type="text/css">
@media screen and (max-width:560px) {

.email-container {
width: 100% !important;
}

/* What it does: Forces elements to resize to the full width of their container. Useful for resizing images beyond their max-width. */
.fluid,
.fluid-centered {
max-width: 100% !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
width: 100% !important;

}
/* And center justify these ones. */
.fluid-centered {
margin-left: auto !important;
margin-right: auto !important;
}

/* 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;
}
/* 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;
}
.center-on-narrow {
}

}

</style>
<table width="100%" align="center">
<td width="100%" class="stack-column-center"><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="center-on-narrow">
<tr>
<td width="100%"><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td dir="ltr" valign="top" style="padding: 0 10px;"><img src="https://f.hubspotusercontent10.net/hubfs/8139412/Logos/dotted%20line.png" alt="alt_text" width="498" class="center-on-narrow" border="0" style="width: 100%; max-width: 498px; height: auto;"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</table>

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr align="center">
<td><h2 style="color: #000000; font-family: arial, helvetica, sans-serif; font-size: 20px; font-style: normal; font-weight: normal;"><br>Save Big with <span style="color: #2372b9;">Constellation Rewards <span style="color: #000000;"></span></span></h2></td>
</tr>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="stack-column-center"><br>
<table align="left" border="0" cellpadding="0" cellspacing="0" width="70%" class="fluid-centered">
<tr>
<td dir="ltr" valign="top" style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; text-align: center;" class="center-on-narrow">Sign in to <a href="https://www.constellationrewards.com/" style="font-weight: bold;" rel="noopener"><span style="color: #2372b9;">Constellation Rewards</span></a><span style="font-weight: normal;"> today to use your Reward Dollars to save on hundreds of gift cards like L.L. Bean, Macy’s, Office Depot, Old Navy, and more!  Save now on dining, travel, entertainment, shopping and more. Log in to start saving today!</span><br><br>

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<div align="center"><a href=" http://constellationrewards.com">
<img style="margin-bottom: 30px;" src="https://f.hubspotusercontent10.net/hubfs/8139412/Constellation%20Rewards/LogIntoConstellationRewards..." width="250" alt="Log In to Constellation Rewards" border="0" class="center-on-narrow"></a></div>
</td>
</tr>
</table>

</td>
</tr>
</table>

<table width="25%" border="0" align="right" cellpadding="0" cellspacing="0" class="stack-column-center">
<tr align="center">
<td valign="top" dir="ltr" class="stack-column-center" ><div align="center"><img class="fluid-centered" src="https://f.hubspotusercontent10.net/hubfs/8139412/Constellation%20Rewards/gift%20card%202.png" width="150" alt="" border="0"></div></td>
</tr>
</table>
</td>
</tr>
</table>
<p>
&nbsp;<br>
</p>

[LoraBergeron]

ARe you suggesting Codepen as a way for me to send you the code of the email?

I created an account and saved the code in it.  I don't know how to share it with you, but in case this works here is the URL:  https://codepen.io/lora-easton-bergeron/pen/WNjVgxJ

[Indra]

Hi @LoraBergeron,

Perhaps you can create a codepen. Here you can use html, css and js if needed.

[LoraBergeron]

I'm trying to paste the html into this reply and it's not working.  How can I send you the file??

[Indra]

Hi @LoraBergeron,

No a preview only works if there is access to the portal.

[LoraBergeron]

do you not have a way for me to send you the html in a file? It's not pasting into this message.

[LoraBergeron]

Can you access this link to the email?  The section I'm referring to is at the bottom of the email.

http://8139412.hs-sites.com/-temporary-slug-99420c26-2ee3-4485-9d9a-0b7b5e8d47e8?hs_preview=LbAgWQPN...

[Indra]

Hi @LoraBergeron,

It looks like other styling is involving your problem, so the full code has to be visible. Perhaps you could place a sample link or full code.

[LoraBergeron]

Hi!

Thank you SO much.  I did try this, but it didn't work. Do you have any other ideas?

[Indra]

Hi @LoraBergeron,

Try changing the markup from:

.stack-column, .stack-column-center{
    display: block !important;
    width: 100% !important;
    max-width: 520px !important;
    direction: ltr !important;
}

to 

.stack-column, .stack-column-center{
    display: block !important;
    width: 100% !important;
    max-width: 520px !important;
    min-width: 100% !important;
    direction: ltr !important;
}

by adding min-width.