That text is looking fine to me, i can see you have it set to font-size: 20px; line-height: 1.25; and Gmail is rendering that across all devices when I test it and looks very consistent with the other email clients too.
For the <hr> I would change it to this to get better cross client support
<hr style="border-width: 0; background: #b7d6d6; color: #b7d6d6; height:7px;width:20%;margin-top:20px">
Side note
For a code block you can use 3 backticks before and after the code sample `
Gmail doesn't support webfonts so it'll be rendering your fallback font in both cases.
(although Gmail downloads Roboto for their own use and you can piggyback onto that)
There are a few possible things that could be affecting it. Do you have a sample of the code you are sending?
From the changes I've seen I'm not sure of anything that would affect the padding, do you have some code you can share?
Do you use any Outlook targeting, maybe using this selector [data-outlook-cycle]. If so that's not applied anymore since the new update. Instead you could try adding \0 after a class name to target outlook like .foo\0{background:red} more details at https://howtotarget.email
Also this code should work for removing the link styling on Outlook iOS (old version and new version) and Applemail iOS
#root [x-apple-data-detectors=true],
a[x-apple-data-detectors=true]{
color: inherit !important;
text-decoration: inherit !important;
}
This is because you have a <table> around the image.
Placing a block element (like a table) inside an <a> isn't valid in older versions of HTML it's something that was new to HTML5.
So the solution would be to remove the table and just use the image as it is.
Some more details http://html5doctor.com/block-level-links-in-html-5/
There are a couple of ways to do this.
The amp-carousel component is set to overflow:hidden and we can't override that. So moving the .amp-carousel-button elements won't work.
The easiest option is to just make the images smaller something like this would do it.
amp-carousel amp-img{
max-width:calc(100% - 120px);
}
The other option would be to hide the default buttons and add your own custom ones using amp-bind to control the slides on="tap:my-carousel.goToSlide(index=0)"
Similar to how the thumbnail images are done here https://amp.dev/documentation/examples/multimedia-animations/image_galleries_with_amp-carousel/?format=email#image-gallery-with-preview
So AMP for Email is a seperate MIME type.
Currently for every send you are probably sending 2 MIME types, an HTML email and a plain text email. With AMP for Email you send 3, HTML, plain text and AMP for Email.
So it's not really a boilerplate things, to create the fallback you just create an extra file, amp-email.html html-email.html plain-text-email.txt
The way you add these depends on how your ESP is set up, this is a link to how we do it in SFMC https://help.salesforce.com/articleView?id=sf.mc_ceb_amp_get_started.htm&type=5
Just had a look and this is a very strange one.
It looks like Gmail is adding <wbr> elements into the code to break it up so styling the outer elements won't fix it.
However you could add wbr {display: none;} to remove them.
I'd also advice adding a class in there so it's not going to break if you want to use <wbr> in the future.
<html>
<head>
<style>
.no-wrap wbr{
display:none;
}
</style>
</head>
<body>
<table style="border-collapse: collapse;width: 400px;table-layout: fixed;">
<tr>
<td style="padding: 0;width:100%;">
<a href="https://docs.google.com" target="_blank" style="display: inline-block; max-width: 100%; border: 1px solid blue; white-space: nowrap;" class="no-wrap">
<div style="overflow: hidden; text-overflow: ellipsis;">
<img src="https://www.iconspng.com/images/square.jpg" width="18" height="18">
<span style="display: inline;overflow: hidden; text-overflow: ellipsis;">long-word-with-hyphen-for-testing-so-we-can-check-how-gmail-Chrome-renders-it
</span>
</div>
</a>
</td>
</tr>
<tr>
<td style="padding: 0;width:100%;">
<a href="https://docs.google.com" target="_blank" style="display: inline-block; max-width: 100%; border: 1px solid blue; white-space: nowrap;" class="no-wrap">
<div style="overflow: hidden; text-overflow: ellipsis;">
<img src="https://www.iconspng.com/images/square.jpg" width="18" height="18">
<span style="display: inline;overflow: hidden; text-overflow: ellipsis;">this is long message without hyphen and Gmail does not wrap
</span>
</div>
</a>
</td>
</tr></table>
</body></html>
I've found a bit of a work around.
We can apply a media query directly to a <style> block.
e.g. <style media="screen and (max-width:480px)">
But some email clients will ignore the media attribute and apply it as a regular style even when the media condition isn't met.
So to only apply it to Thunderbird we can prefix our styles with .moz-text-html so the full fix looks like
<style media="screen and (max-width:600px)">
.moz-text-html .foo{background:green}
</style>
There is a bug for it filed here https://bugzilla.mozilla.org/show_bug.cgi?id=1679878
And a bit more info on why they did it here https://bugzilla.mozilla.org/show_bug.cgi?id=1530106#c60