Hi Mark, Shopify is just one of the stores types! We also have BigCommerce and WooCommerce stores
Knowing the width or height doesn't help with dealing with landscape/portrait issues either I don't think.
One image might be landscape, another portrait, side by side and the containing cell height must be the same (hence fixing the height with a table in Outlook). Because this is a product recommendation tool, the images are dynamic, the user doesn't touch them.
Here's an improvement so we're only including image code once but wrapping a table to fix the height for mso images (based on 2x3 image ratio)- still not ideal as if you're using a landscape image, the cell height is quite large.
<a href="https://becs-conversio.myshopify.com/products/animal-print-hair-band-various-colours?receiptfultype=recin" target="_blank" rel="noopener noreferrer" style="outline: 0px; border: none; text-decoration: none;"><!--[if gte mso 9]><table width="100%" align="center" border="0" cellspacing="0" cellpadding="0"><tbody><tr><td height="330" align="center" ><![endif]--><img class="product-image img-rsz" width="220" style="width:auto;height:auto;max-width:220px;max-height:330px;display:block;" src="https://cdn.shopify.com/s/files/1/0004/3283/2573/products/600_DB187_Hair_Band_Silver_Leopard_PrintPS_480x480.jpg?v=1519397701" alt=""><!--[if gte mso 9]></td></tr></tbody></table><![endif]--></a>
Started a new discussion: Handling images in Outlook where dimensions are unknown
Started a new discussion: Solution to Apple Mail scrolling when using spacebar in inputs
I recommend if you don't want the phone number to look like a link when hovered over, try cursor: pointer in addition to the other css
Double opt-in would solve this problem since they'd need to confirm before you start sending to them :)
I've been testing this for the past hour and a half as had a customer complaint about it. I've tested on
iPhone 6S
Sony Xperia M4 Aqua with Android 5
Samsung Galaxy Mini with Android 4.3
Samsung Galaxy J3
Validated code with W3, all fine.
On the J3 and the Xperia, I got the cropping, on the other two I didn't. Since it seems to be a physical length issue I tried again with a super long image.
Results:
Removed one item of content where the cropping occurred. Cropping on iPhone (halfway through some text, physically through the letters), big blank area underneath where the content should've been. All other devices OK!
Tried putting the removed item of content above the long image to see if it was the code in this block causing the issue. All displayed correctly.
Reopened original email causing issues. All displayed correctly.
Resent the original email. Xperia cropped. Closed and reopened, displayed correctly.
Totally bizarre but seems like a loading issue (from my experience)
Litmus says it works, but having sent a test to my phone, it doesn't seem to work in gmail.