This snippet has places for both the light mode and dark mode logos. Make sure to supply versions for both.
From visual editor, you can access the dark mode version if you put your overall settings for your computer or browser into dark mode.
Weird. I'm not sure why it's doing that, but If I put each table row in it's own table it works fine. You'll have to add widths to the columns in the new tables
Hey Ben! You can actually simplify your code a bit if you leave the transparent images out of it and use a non-breaking space and the line-height to control the height of the table cells, like this >
<tr>
<td style="mso-line-height-rule: exactly; line-height:2px; font-size:2px; background-color: #ff511c;">& nbsp;</td>
<td style="mso-line-height-rule: exactly;line-height:2px; font-size:2px; background-color: #ffffff;">& nbsp;</td>
<td style=";mso-line-height-rule: exactly;line-height:2px; font-size:2px; background-color: #ff511c;">& nbsp;</td>
<td style="mso-line-height-rule: exactly;line-height:2px; font-size:2px; background-color: #ff511c;">& nbsp;</td>
</tr>
(I added the space between the & and the nbsp so it'll show up. otherwise all that was showing up was just an empty space. don't do that in the actual code.)
However you can do it with the images if you would prefer. You need to add the line-height and mso-line-height-rule properties on to the image's CSS if you do. Outlook has a minimum height that is more than 2px for images unless you add those properties on. (I recall it being 7px, but I haven't tested to see what it is recently)
Yep. Remi did a write up in his email bugs repo on GitHub: https://github.com/hteumeuleu/email-bugs/issues/93