Apply the same rule to all the table tags also.
that worked thank you.
how can I move the icon to stick to the top? if possible
Like this:
Hi,
Iām not sure if this is what you mean but f you want content aligned to the top of a cell then you need to set vertical-align:top on the cell.
You should also collapse the borders on the table and set images to block to kill the gaps under those also.
e.g.
td{vertical-align:top}
table{border-collapse:collapse}
img{display:block}
Of course as this is for html email you need to apply those rules as inline styles on all the appropriate tags.
Ok did I add them the correct tags?
<table id="main-table" style="width:600px;border:none;border-collapse:collapse;">
<tbody>
<tr>
<td style="border:none"><img alt="" id="header" src="https://www.tuneupfitness.com/sites/default/files/email_images/pose_notification_redesign_email_final_01.jpg" style="width: 600px;height: 285px;border-width: 0px;border-style: solid;padding-left:0px;padding-right:0px;" /></td>
</tr>
<tr>
<td style="border:none">
<table style="border:none;font-size:16px;border-collapse:collapse;">
<tbody>
<tr>
<td style="border:none;vertical-align:top;"><img alt="icons" class="icon-sections" src="https://www.tuneupfitness.com/sites/default/files/email_images/pose_notification_redesign_email_final_02.jpg" style="width: 225px; height: 186px;display:block" /></td>
<td style="border:none;">
<p id="intro"><strong>Hi ~Contact.FirstName~,</strong><br />
<br />
Below is a direct link to the<br />
YTU Pose of the Week video:<br />
<br />
<strong>Weekly Pose</strong>: %pose_name<br />
<br />
<strong>Therapeutic Benefits:</strong> %therapeutic_application</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="border:none"><a href="https://tuneupfitness.stage.avatarnewyork.com/one-armed-plank?destination=user%23overlay%3Dadmin%2Fytu-settings%2Fdaily-management%2Fpose"><img src="%email_image" /></a></td>
</tr>
<tr>
<td style="border:none;vertical-align:top;"><img alt="" src="https://tuneupfitness.stage.avatarnewyork.com/sites/default/files/email_images/pose_notification_redesign_email_final_06.jpg" style="width: 600px;display:block" /></td>
</tr>
<tr>
<td style="border:none;"><img alt="" src="https://tuneupfitness.stage.avatarnewyork.com/sites/default/files/email_images/pose_notification_redesign_email_final_07.jpg" style="width: 600px;display:block" /></td>
</tr>
<tr>
<td style="border:none;">
<p id="outro" style="color:#788767; margin-left:35px;">Warmest,<br />
Jill Miller<br />
Creator, Yoga Tune UpĀ®</p>
</td>
</tr>
</tbody>
</table>
You missed the display:block from the first image.
<img alt="" id="header" src="https://www.tuneupfitness.com/sites/default/files/email_images/pose_notification_redesign_email_final_01.jpg" style="width: 600px;height: 285px;border-width: 0px;border-style: solid;padding-left:0px;padding-right:0px;display:block">
I made the text bigger on the right side of this section
and I wanted to make the icon image on the left
smaller but then it created a gap above.
Iād need to see your revised code but it looks as though you havenāt made the td
vertical-align:top
?
On my phone I sent a test email and it is off on Gmail,
but on my outlook it looks perfectly fine.
and desktop gmail looks off too
Desktop (Outlook)
Try setting a percentage width on both those cell that holds the image and the text. Then setting the image to width:100% and height:auto.
It looks as those those email clients have narrow widths.
Iām afraid with html email there is no definite answer and you just have to keep trying and chopping and changing until you get close to what you want. You will never get all email clients to behave,
yeah, so Ive heardā¦
So I have implemented the widths, but ill have to test it to see if it works
Update: It worked, but now I have my bottom image overflowing. Doesnāt make
sense because I have a hard width on the image:
The last image is the only one that you havenāt used the width attribute so I would test using the width attribute instead of the style attribute and see what happens?
oh wow didnt see that
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.