Repository navigation
Gmail not allowing the responsiveness for mobile #229
Description
What version of Bootstrap Email are you using?
1.4.0
How are you compiling?
Ruby
Code example
No response
Describe your issue
Did not copy the code example as it is working. I am having an issue with responsiveness on mobile
Online Editor when sending a test email works good
Ruby - the HTML file it creates works fine when opened locally in a browser
When I copy the HTML code into gmail - I seem to loose responsiveness. I have tried 2 different "HTML editors" for gmail and both give the same results.
EDIT: Further to the above, If I use imap with Thunderbird I can successfully send the email through gmail and keep responsiveness. I can not use the web based gmail however. Here is a simple test case:
Original Code before "re-formatting":
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<div class="row">
<div class="col-lg-6 border">1</div>
<div class="col-lg-6 border">2</div>
</div>
<div class="row">
<div class="col-lg-6 border">1</div>
<div class="col-lg-6 border">2</div>
</div>
</body>
</html>
After "re-formatting"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<!-- Compiled with Bootstrap Email version: 1.4.0 --><meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="x-apple-disable-message-reformatting">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body,table,td{font-family:Helvetica,Arial,sans-serif !important}.ExternalClass{width:100%}.ExternalClass,.ExternalClass p,.ExternalClass span,.ExternalClass font,.ExternalClass td,.ExternalClass div{line-height:150%}a{text-decoration:none}*{color:inherit}a[x-apple-data-detectors],u+#body a,#MessageViewBody a{color:inherit;text-decoration:none;font-size:inherit;font-family:inherit;font-weight:inherit;line-height:inherit}img{-ms-interpolation-mode:bicubic}table:not([class^=s-]){font-family:Helvetica,Arial,sans-serif;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0px;border-collapse:collapse}table:not([class^=s-]) td{border-spacing:0px;border-collapse:collapse}@media screen and (max-width: 600px){.row-responsive.row{margin-right:0 !important}td.col-lg-6{display:block;width:100% !important;padding-left:0 !important;padding-right:0 !important}*[class*=s-lg-]>tbody>tr>td{font-size:0 !important;line-height:0 !important;height:0 !important}}
</style>
</head>
<body style="outline: 0; width: 100%; min-width: 100%; height: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-family: Helvetica, Arial, sans-serif; line-height: 24px; font-weight: normal; font-size: 16px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; color: #000000; margin: 0; padding: 0; border-width: 0;" bgcolor="#ffffff">
<table class="body" valign="top" role="presentation" border="0" cellpadding="0" cellspacing="0" style="outline: 0; width: 100%; min-width: 100%; height: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-family: Helvetica, Arial, sans-serif; line-height: 24px; font-weight: normal; font-size: 16px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; color: #000000; margin: 0; padding: 0; border-width: 0;" bgcolor="#ffffff">
<tbody>
<tr>
<td valign="top" style="line-height: 24px; font-size: 16px; margin: 0;" align="left">
<div class="row row-responsive" style="margin-right: -24px;">
<table class="" role="presentation" border="0" cellpadding="0" cellspacing="0" style="table-layout: fixed; width: 100%;" width="100%">
<tbody>
<tr>
<td class="col-lg-6 border" style="line-height: 24px; font-size: 16px; min-height: 1px; font-weight: normal; padding-right: 24px; width: 50%; margin: 0; border: 1px solid #e2e8f0;" align="left" valign="top">
1
</td>
<td class="col-lg-6 border" style="line-height: 24px; font-size: 16px; min-height: 1px; font-weight: normal; padding-right: 24px; width: 50%; margin: 0; border: 1px solid #e2e8f0;" align="left" valign="top">
2
</td>
</tr>
</tbody>
</table>
</div>
<div class="row row-responsive" style="margin-right: -24px;">
<table class="" role="presentation" border="0" cellpadding="0" cellspacing="0" style="table-layout: fixed; width: 100%;" width="100%">
<tbody>
<tr>
<td class="col-lg-6 border" style="line-height: 24px; font-size: 16px; min-height: 1px; font-weight: normal; padding-right: 24px; width: 50%; margin: 0; border: 1px solid #e2e8f0;" align="left" valign="top">
1
</td>
<td class="col-lg-6 border" style="line-height: 24px; font-size: 16px; min-height: 1px; font-weight: normal; padding-right: 24px; width: 50%; margin: 0; border: 1px solid #e2e8f0;" align="left" valign="top">
2
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
If I create a draft from thunderbird, open in gmail using browser, it does the following (notice what is missing):
<div style="outline:0;width:100%;min-width:100%;height:100%;font-family:Helvetica,Arial,sans-serif;line-height:24px;font-weight:normal;font-size:16px;box-sizing:border-box;color:#000000;margin:0;padding:0;border-width:0" bgcolor="#ffffff">
<table valign="top" role="presentation" style="outline:0;width:100%;min-width:100%;height:100%;font-family:Helvetica,Arial,sans-serif;line-height:24px;font-weight:normal;font-size:16px;box-sizing:border-box;color:#000000;margin:0;padding:0;border-width:0" cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff">
<tbody>
<tr>
<td style="line-height:24px;font-size:16px;margin:0" valign="top" align="left">
<div class="m_343233203037282442row m_343233203037282442row-responsive">
<table role="presentation" style="table-layout:fixed;width:100%" width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td class="m_343233203037282442col-lg-6" style="line-height:24px;font-size:16px;min-height:1px;font-weight:normal;padding-right:24px;width:50%;margin:0;border:1px solid #e2e8f0" valign="top" align="left"> 1 </td>
<td class="m_343233203037282442col-lg-6" style="line-height:24px;font-size:16px;min-height:1px;font-weight:normal;padding-right:24px;width:50%;margin:0;border:1px solid #e2e8f0" valign="top" align="left"> 2 </td>
</tr>
</tbody>
</table>
</div>
<div class="m_343233203037282442row m_343233203037282442row-responsive">
<table role="presentation" style="table-layout:fixed;width:100%" width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td class="m_343233203037282442col-lg-6" style="line-height:24px;font-size:16px;min-height:1px;font-weight:normal;padding-right:24px;width:50%;margin:0;border:1px solid #e2e8f0" valign="top" align="left"> 1 </td>
<td class="m_343233203037282442col-lg-6" style="line-height:24px;font-size:16px;min-height:1px;font-weight:normal;padding-right:24px;width:50%;margin:0;border:1px solid #e2e8f0" valign="top" align="left"> 2 </td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
If I create the draft right in gmail (browser), save it, then re-open it it has the following changes:
<!-- Compiled with Bootstrap Email version: 1.4.0 --><meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="x-apple-disable-message-reformatting">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="format-detection" content="telephone=no, date=no, address=no, email=no">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body,table,td{font-family:Helvetica,Arial,sans-serif !important}.ExternalClass{width:100%}.ExternalClass,.ExternalClass p,.ExternalClass span,.ExternalClass font,.ExternalClass td,.ExternalClass div{line-height:150%}a{text-decoration:none}*{color:inherit}a[x-apple-data-detectors],u+#body a,#MessageViewBody a{color:inherit;text-decoration:none;font-size:inherit;font-family:inherit;font-weight:inherit;line-height:inherit}img{-ms-interpolation-mode:bicubic}table:not([class^=s-]){font-family:Helvetica,Arial,sans-serif;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0px;border-collapse:collapse}table:not([class^=s-]) td{border-spacing:0px;border-collapse:collapse}@media screen and (max-width: 600px){.row-responsive.row{margin-right:0 !important}td.col-lg-6{display:block;width:100% !important;padding-left:0 !important;padding-right:0 !important}*[class*=s-lg-]>tbody>tr>td{font-size:0 !important;line-height:0 !important;height:0 !important}}
</style>
<table class="body" valign="top" role="presentation" border="0" cellpadding="0" cellspacing="0" style="outline: 0; width: 100%; min-width: 100%; height: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; font-family: Helvetica, Arial, sans-serif; line-height: 24px; font-weight: normal; font-size: 16px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; color: #000000; margin: 0; padding: 0; border-width: 0;" bgcolor="#ffffff">
<tbody>
<tr>
<td valign="top" style="line-height: 24px; font-size: 16px; margin: 0;" align="left">
<div class="row row-responsive" style="margin-right: -24px;">
<table class="" role="presentation" border="0" cellpadding="0" cellspacing="0" style="table-layout: fixed; width: 100%;" width="100%">
<tbody>
<tr>
<td class="col-lg-6 border" style="line-height: 24px; font-size: 16px; min-height: 1px; font-weight: normal; padding-right: 24px; width: 50%; margin: 0; border: 1px solid #e2e8f0;" align="left" valign="top">
1
</td>
<td class="col-lg-6 border" style="line-height: 24px; font-size: 16px; min-height: 1px; font-weight: normal; padding-right: 24px; width: 50%; margin: 0; border: 1px solid #e2e8f0;" align="left" valign="top">
2
</td>
</tr>
</tbody>
</table>
</div>
<div class="row row-responsive" style="margin-right: -24px;">
<table class="" role="presentation" border="0" cellpadding="0" cellspacing="0" style="table-layout: fixed; width: 100%;" width="100%">
<tbody>
<tr>
<td class="col-lg-6 border" style="line-height: 24px; font-size: 16px; min-height: 1px; font-weight: normal; padding-right: 24px; width: 50%; margin: 0; border: 1px solid #e2e8f0;" align="left" valign="top">
1
</td>
<td class="col-lg-6 border" style="line-height: 24px; font-size: 16px; min-height: 1px; font-weight: normal; padding-right: 24px; width: 50%; margin: 0; border: 1px solid #e2e8f0;" align="left" valign="top">
2
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
Clearly the issue is with using the gmail web, however my use case requires it as I use mail merge mixed with google spreadsheet. Is there any way around this?
Activity
abduraufsherkulov commentedon Feb 18, 2024
hi @johnlescault, were you able to figure it out?