vikram chharia
Reputation: 1
Html email is getting unresponsive in gmail crome browser, works fine in gmail app and console in google desktop
I am creating this email html template the html works responsively in google console and gmail mobile app, but gets distorted in mobile chrome gmail version.
This image is the mobile responsiveness when i open in console in crome desktop
this is email responsivness when i open in browser desktop
this is image responsiveness when i open in mobile browser
note this email template works fine in the gmail mobile app
<!DOCTYPE html>
<html lang="en">
<head>
<title>pixels</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://fonts.googleapis.com/css?family=Objektiv+Mk1&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.c500&display=swap" rel="stylesheet">
<style>
@font-face {
font-family: objektiv mk1;
src: url(fonts.ttf);
}
* {
font-family: objektiv mk1;
}
</style>
</head>
<body style="margin:0; padding:0;">
<div style="width:600px; margin:auto; overflow:hidden; border: 1px solid #E5E5E5; background-image: url(https://i.postimg.cc/Y00Zyjrj/xxx.png); background-repeat: no-repeat; background-position: 0px 91px; ">
<table width="600px" cellspacing="0" cellpadding="0" style="position: relative; border: none; ">
<tbody>
<td style="padding: 20px;">
<table width="100%">
<tr style="text-align: center; width: 100%;">
<td style="text-align: center;">
<div>
<img src="https://i.postimg.cc/fyVqfFC9/xxx-xxx-logo-green-410x.png"
style="max-width: 150px;">
</div>
</td>
</tr>
<tr>
<td style="text-align: center; padding: 25px 0px 0px 0px; border-top: 2px solid #f4f4f4;">
<div>
<img src="https://i.postimg.cc/X7p6s1qx/xxx-you.png" style="max-width: 350px;">
</div>
</td>
</tr>
</table>
</div>
<tr>
<td style="background: #fff; font-size: 28px; text-align: center; padding: 20px 84px 30px;">for
ordering with us and taking the first step towards better health and wellness 😊</td>
</tr>
<tr style="background-color: #E5E5E5;">
<td>
<table style="width: 100%; padding: 40px; overflow: hidden;">
<tbody>
<tr>
<td style=" background: #fff; overflow: hidden; border-radius: 5px;">
<div><img src="https://i.postimg.cc/3wHMJKBb/process.png" style="margin: auto;"></div>
</td>
</tr>
<tr>
<td style="padding: 10px 0px;">
<p style="text-align:center;font-size: 18px; font-weight: 600;">Your order will
be dispatched within 48 hours. </p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="padding: 26px 26px 0px;">
<table width="100%" cellspacing="0" cellpadding="0" border="0"
style="background-color: #EEFDEB;">
<thead style="background-color: #EEFDEB; margin-bottom: 10px;">
<tr>
<td style="width: 20%; padding: 10px; font-weight: 400; font-size: 18px;">Product
</td>
<td style="width:24%; padding: 10px"> </td>
<td style="width: 20%; padding: 10px; font-weight: 400; font-size: 18px;">Qty</td>
<td style="width: 20%; padding: 10px; font-weight: 400; font-size: 18px;">Price</td>
<td style="width: 20%; padding: 10px; font-weight: 400; font-size: 18px;">Subtotal
</td>
</tr>
</thead>
<tbody style="background-color: #E5E5E5;">
<tr>
<td style="height: 10px; background-color: #fff;"></td>
</tr>
<tr>
<td style="width:20%;">
<div>
<img src="https://i.postimg.cc/B6YwDsT3/xxx-eff.png"
style="max-width:100%;">
</div>
</td>
<td style="width:24%; font-size: 16px;">ACV <span
style="display: block;">Effervescent</span< /td>
<td style="width:20%; font-size: 16px;">{#var#}</td>
<td style="width:20%; font-size: 16px;">{#var#}</td>
<td style="width:16%; font-size: 16px;">{#var#}</td>
</tr>
<tr>
<td style="height: 10px; background-color: #fff;"></td>
</tr>
<tr style="background-color: #EEFDEB;">
<td style="width:20%;"> </td>
<td style="width:24%; padding: 10px 0px; font-size: 16px;">Discount</td>
<td style="width:20%;"> </td>
<td style="width:20%;"> </td>
<td style="width:16%; font-size: 16px;">{#var#}</td>
</tr>
<tr style="background-color: #EEFDEB;">
<td style="width:20%;"> </td>
<td style="width:24%; padding: 10px 0px; font-size: 16px;">Discount</td>
<td style="width:20%;"> </td>
<td style="width:20%;"> </td>
<td style="width:16%; font-size: 16px;">{#var#}</td>
</tr>
<tr style="background-color: #EEFDEB;">
<td style="width:20%;"> </td>
<td style="width:24%; padding: 10px 0px; font-size: 16px;">Discount</td>
<td style="width:20%;"> </td>
<td style="width:20%;"> </td>
<td style="width:16%; font-size: 16px;">{#var#}</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td
style="padding: 26px; background-image: url(https://i.postimg.cc/RZfQd50z/1-Transactional-xxx-Order-xxx-svg-1.png); background-repeat: no-repeat; background-position: 100% 350px; width: 100%;">
<table width="100%;">
<tr>
<td style="">
<div
style="padding:0px 26px; background: radial-gradient(80.68% 88.46% at 50% 50%, #69DE7A 0%, #A9EF82 100%) #EEFDEB; border: 1.5px solid #000000; border-radius: 6px;">
<p style="text-align:center; font-size: 24px; font-weight: 700;">Your cashback
of {#var#} will be credited to your wallet upon delivery!</p>
</div>
</td>
</tr>
<tr>
<td
style="border-bottom: 1.5px solid #969696; position: relative; top: 10px; opacity: 0.25;">
</td>
</tr>
<tr>
<td>
<div>
<p style="font-weight: 600;">Shipping to:</p>
<p style="margin:0;">{name}</p>
<p style="margin:0;">{address line 1}</p>
<p style="margin:0;">{address line 2}</p>
<p style="margin:0;">{address line 3}</p>
<p style="margin:0;">Tel. {phone number}</p>
</div>
</td>
</tr>
<tr>
<td
style="border-bottom: 1.5px solid #969696; position: relative; top: 10px; opacity: 0.25;">
</td>
</tr>
<tr>
<td style="padding: 30px 75px 35px; font-size: 21px; text-align: center;">Check out our
<strong>other best-sellers</strong> based on your purchase!
</td>
</tr>
<tr>
<td style="padding: 0px 40px 50px;">
<table width="100%" cellspacing="0" cellpadding="0"
style="padding: 10px 25px; box-shadow: 0px 2px 20px 14px rgb(64 60 67 / 16%); border-radius: 4px; background-color: #EEFDEB;">
<tr>
<td style="width:38%">
<div>
<img src="https://i.postimg.cc/B6YwDsT3/xxx-eff.png.png"
style="max-width: 120px;">
</div>
</td>
<td style="width:62%">
<p
style="font-weight: 600; font-size: 15px; padding: 0 15px 0 0; margin-bottom: 0;">
Apple Cider Vinegar Effervescent</p>
<div><img src="https://i.postimg.cc/dQWKmcsL/star.png" /><img
src="https://i.postimg.cc/dQWKmcsL/star.png" /><img
src="https://i.postimg.cc/dQWKmcsL/star.png" /><img
src="https://i.postimg.cc/dQWKmcsL/star.png" /><img
src="https://i.postimg.cc/dQWKmcsL/star.png" /></div>
<div><a href="#"><img src="https://i.postimg.cc/HsRDR07m/btn.png" /></a>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style=" padding: 0px 40px 50px;">
<table width="100%" cellspacing="0" cellpadding="0"
style="padding: 10px 25px; box-shadow: 0px 2px 20px 14px rgb(64 60 67 / 16%); border-radius: 4px; background-color: #EEFDEB;">
<tr>
<td style="width:38%">
<div>
<img src="https://i.postimg.cc/BZzVnSZc/xxx.png"
style="max-width: 120px;">
</div>
</td>
<td style="width:62%">
<p
style="font-weight: 600; font-size: 15px; padding: 0 15px 0 0; margin-bottom: 0;">
Ashwa Calm</p>
<div><img src="https://i.postimg.cc/dQWKmcsL/star.png" /><img
src="https://i.postimg.cc/dQWKmcsL/star.png" /><img
src="https://i.postimg.cc/dQWKmcsL/star.png" /><img
src="https://i.postimg.cc/dQWKmcsL/star.png" /><img
src="https://i.postimg.cc/dQWKmcsL/star.png" /></div>
<div><a href="#"><img src="https://i.postimg.cc/HsRDR07m/btn.png" /></a>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding: 0px 40px 50px;">
<table width="100%" cellspacing="0" cellpadding="0"
style="padding: 10px 25px; box-shadow: 0px 2px 20px 14px rgb(64 60 67 / 16%); border-radius: 4px; background-color: #EEFDEB;">
<tr>
<td style="width:38%; padding: 0px 20px;">
<div>
<img src="https://i.postimg.cc/pr3GGZc1/xxx.png"
style="max-width: 75px;">
</div>
</td>
<td style="width:62%">
<p
style="font-weight: 600; font-size: 15px; padding: 0 15px 0 0; margin-bottom: 0;">
Glutathione Skin Glow
Effervescent</p>
<div><img src="https://i.postimg.cc/dQWKmcsL/star.png" /><img
src="https://i.postimg.cc/dQWKmcsL/star.png" /><img
src="https://i.postimg.cc/dQWKmcsL/star.png" /><img
src="https://i.postimg.cc/dQWKmcsL/star.png" /><img
src="https://i.postimg.cc/dQWKmcsL/star.png" /></div>
<div><a href="#"><img src="https://i.postimg.cc/HsRDR07m/btn.png" /></a>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding: 25px;">
<table width="100%" style="border-radius: 5px; border: 1px solid #000; padding: 13px 25px;">
<tr>
<td style="font-size: 20px; font-weight: 600;">Stalk us on our socials 👀</td>
<td style="text-align: right;">
<table width="100%;">
<tr>
<td style="text-align: center;"><a href="https://www.facebook.com/Plixlife/"
style="line-height: 0; display: block;"><img
src="https://i.postimg.cc/HnPDpXZQ/xxx.png"></a></td>
<td
style="border-left: 2px solid #000; text-align: center; border-right: 2px solid #000;">
<a href="https://www.instagram.com/myplixlife/"
style="line-height: 0; display: block;"><img
src="https://i.postimg.cc/wB5C1S4x/xxx.png"></a></td>
<td style="text-align: center;"><a
href="https://www.youtube.com/channel/UCxjpQEVVTxs1P8i9x4KVoKQ/videos"
style="line-height: 0; display: block;""><img src="
https://i.postimg.cc/262gwnfP/xxx.png"></a></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>Upvotes: 0
Views: 1065
Answers (1)
Nathan
Reputation: 5214
You have a number of large images which are not responsive. You could consider putting max-width:100% on them.
Alternatively, you can fine-tune certain types of images by adding a class to the image and then using a media query. For example:
<style>
@media screen and (max-width:600px) {
.small {
max-width:100px!important;
}
}
</style>
<img class="small" href="..." ...>
I also couldn't get it to be responsive in the browser without having the outer div min-width:100% (and no width or max-width set), and, the table width:100%;max-width:600px;margin:0 auto.
That will get it down to about 420px, but then it's just large tables that can't be made smaller. You could consider using a media query for making certain <td>'s have less padding on mobiles, and/or using a small font-size. Otherwise you will have to make your table differently.
Upvotes: 0
Related Questions
- Why is gmail not responding to media-queries?
- gmail html body sometime broken ( in mobile web gmail )
- My responsive HTML Email is not responsive when it's actually sent on Gmail
- How do I get my responsive email to work in Gmail?
- Responsive HTML email - Gmail adding classes
- Html Email Template on Android not responsive
- html email not showing responsive
- Responsive emails on Gmail app (Android)
- support for responsive emails in Gmail App IOS
- HTML mail does not display complete on android gmail client