CMS Development

EmilyW1990
Member

Email Mobile Responsive Issue

Hi there,

 

I am having issues with email mobile responsiveness on an IPhone 8. Does anyone here have any experience putting media queries into place to establish width barriers?

Thanks!

0 Upvotes
4 Replies 4
Stephanie-OG
Key Advisor

Email Mobile Responsive Issue

Hi Emily, emails can be tricky to code as every email client and device behaves fairly differently. You can use media queries in them but bear in mind that these aren't supported on Outlook, for example. 

 

Perhaps if you could include the code for the email and what aspects of it aren't responsive we can provide you with more information. 

 


Stephanie O'Gay Garcia
HubSpot Design / Development / Automation

 

Website | Contact

EmilyW1990
Member

Email Mobile Responsive Issue

Hi Stephanie, 


Below is the code. The image titled 'Blog-Header_6.26_FINAL-1' is running off the email and so is the text in the first paragraph.

<table style="margin: 0px auto; width: 669px; text-align: left; border-collapse: collapse; height: 254px;" width="100%" align="center">
<tbody>
<tr>
<td style="padding: 0px 10px 10px 15px; text-align: center; width: 653.182px;"><span style="font-size: 18px; font-family: arial, helvetica, sans-serif; color: #000000;">Industry Leading Kitchen Display System</span></td>
</tr>
<tr>
<td style="padding: 0px 10px 15px 15px; width: 653.182px;"><center><img src="https://cdn2.hubspot.net/hubfs/2527126/Blog-Header_6.26_FINAL-1.png" alt="Blog-Header_6.26_FINAL-1" width="580" style="width: 580px; max-width: 580px;" class=""></center></td>
</tr>
<tr>
<td style="width: 676.193px;">
<p><span style="font-family: arial, helvetica, sans-serif; color: #000000;">For over 20 years, <a href="https://www.qsrautomations.com/company/#utm_source=email&amp;utm_medium=hs_email&amp;utm_campaign=ro..." style="color: #000000;">QSR Automations</a> has helped restaurants reduce kitchen stress&nbsp;</span><span style="font-size: inherit; color: #000000; font-family: arial, helvetica, sans-serif; background-color: transparent;">and boost <br>output through its best-in-class kitchen software. We'd like for you to meet the industry leader <br>in kitchen display systems</span><span style="font-size: inherit; color: #000000; font-family: arial, helvetica, sans-serif; background-color: transparent;">. With over 70,000 installs, our kitchen display system has created smarter, more efficient restaurants.</span></p>
<p><span style="font-family: arial, helvetica, sans-serif; color: #000000;">I'm Ronald Smith, Senior Director of Sales at QSR Automations and work with many <br>restaurants in the Northeast.&nbsp;<span style="font-size: inherit; background-color: transparent;">I'd love to chat with you and get to know how I can help your restaurant.&nbsp;<br><br><strong>Are you currently in the market for a new kitchen display system?</strong></span></span></p>
<p><span style="font-family: arial, helvetica, sans-serif; color: #000000;"><span color="#666666" face="trebuchet ms, geneva">1.) Sure, tell me more.<br></span><span style="font-size: inherit; background-color: transparent;">2.) Maybe. What can your kitchen display system do differently?<br>3.) No, not at the moment, but please send over additional information.<br>4.) No, thank you.</span></span></p>
<p><span style="font-family: arial, helvetica, sans-serif; color: #000000;"><span style="font-size: inherit; background-color: transparent;"></span><span style="font-size: inherit; font-style: inherit; text-align: right; background-color: transparent;">Respond to this email with the number that best fits your interest.&nbsp;<br></span></span></p>
<hr><center><a href="https://www.linkedin.com/in/ronaldsmith/" class=""><span style="font-family: arial, helvetica, sans-serif; color: #000000;"><strong style="color: inherit; font-size: inherit;"><img src="https://cdn2.hubspot.net/hubfs/2527126/Ron_circular_headshot.png" alt="Ron_circular_headshot" width="162" class="" align="center" style="width: 162px; max-width: 162px; margin-top: 0px; margin-bottom: 10px; float: left;"></strong></span></a></center>
<p style="text-align: left;"><span style="font-family: arial, helvetica, sans-serif; color: #000000;"><span style="font-size: 13px;"><br><span style="font-size: 12px;">Ronald Smith</span><br><span style="font-size: 12px;"><span style="background-color: transparent;">Sr. Director of Sales<br></span><strong style="color: inherit; font-size: inherit;">QSR Automations Inc.<br></strong>p&nbsp;|&nbsp;502.301.4887&nbsp;<br></span></span><span style="font-size: 12px;">m&nbsp;|&nbsp;401.594.6008</span></span><span style="font-size: inherit; font-style: inherit; text-align: right; background-color: transparent;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span></p>
<p style="text-align: left;"><span style="font-size: inherit; font-style: inherit; text-align: right; background-color: transparent;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span style="font-size: inherit; font-style: inherit; text-align: right; background-color: transparent;">&nbsp;</span><span style="color: #000000; font-family: arial, helvetica, sans-serif; font-size: inherit; background-color: transparent;">&nbsp;</span></p>
<hr>
<p><span style="font-family: arial, helvetica, sans-serif; color: #000000;"><span style="font-size: inherit; font-style: inherit; text-align: right; background-color: transparent;"> &nbsp;</span><span style="font-size: inherit; font-style: inherit; text-align: right; background-color: transparent;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</span></span></p>
<p style="text-align: center;"><br><span style="font-size: 20px; font-family: arial, helvetica, sans-serif; color: #000000;"><strong>We keep great company.&nbsp;</strong></span></p>
</td>
</tr>
</tbody>
</table>
<center></center>

 

Thanks so much!

0 Upvotes
Stephanie-OG
Key Advisor

Email Mobile Responsive Issue

Hi Emily, 

 

The issue with this template are the fixed widths. For example, on the table you have a fixed width of 669px and 653.182px and on the image you have a fixed with of 580px.

 

Instead, set the widths to 100% and set the max-width to the widest you'd like it to be, like this: 

 

<table style="margin: 0px auto; max-width: 669px; width: 100%; text-align: left; border-collapse: collapse; height: 254px;" width="100%" align="center">
<tbody>
<tr>
<td style="padding: 0px 10px 10px 15px; text-align: center; max-width: 653.182px; width: 100%;"><span style="font-size: 18px; font-family: arial, helvetica, sans-serif; color: #000000;">Industry Leading Kitchen Display System</span></td>
</tr>
<tr>
<td style="padding: 0px 10px 15px 15px; max-width: 653.182px; width: 100%;">
<center><img src="https://cdn2.hubspot.net/hubfs/2527126/Blog-Header_6.26_FINAL-1.png" alt="Blog-Header_6.26_FINAL-1" width="100%" style="max-width: 580px; width: 100%;" class=""></center>
</td>
</tr> ... etc.

 

I'd also recommend trying HubSpot's drag and drop builder. It shouldn't take more than a few minutes to create this email template and it will be fully responsive. 

 

I would only really switch to HTML if the email template is really complex. 

 

I hope that helps!

 


Stephanie O'Gay GarciaHubSpot Design / Development / Automation

Website | Contact

 

If this helped, please mark it as the solution to your question, thanks!

0 Upvotes
EmilyW1990
Member

Email Mobile Responsive Issue

Hi Stephanie,

 

Thanks for getting back to me! Below is the code from the email. The image titled 'Blog-Header_6.26_FINAL-1.png' and the text in the first paragraph runs off the side of the email on mobile.

<table style="margin: 0px auto; width: 669px; text-align: left; border-collapse: collapse; height: 254px;" width="100%" align="center">
<tbody>
<tr>
<td style="padding: 0px 10px 10px 15px; text-align: center; width: 653.182px;"><span style="font-size: 18px; font-family: arial, helvetica, sans-serif; color: #000000;">Industry Leading KDS: ConnectSmart Kitchen</span></td>
</tr>
<tr>
<td style="padding: 0px 10px 15px 15px; width: 653.182px;"><center><img src="https://cdn2.hubspot.net/hubfs/2527126/Blog-Header_6.26_FINAL-1.png" alt="Blog-Header_6.26_FINAL-1" width="580" style="width: 580px; max-width: 580px;" class=""></center></td>
</tr>
<tr>
<td style="width: 676.193px;">
<p><span style="font-family: arial, helvetica, sans-serif; color: #000000;">For over 20 years, <a href="https://www.qsrautomations.com/company/#utm_source=email&amp;utm_medium=hs_email&amp;utm_campaign=ro..." style="color: #000000;">QSR Automations</a> has helped restaurants reduce kitchen stress&nbsp;</span><span style="font-size: inherit; color: #000000; font-family: arial, helvetica, sans-serif; background-color: transparent;">and boost <br>output through its best-in-class kitchen software. We'd like for you to meet the industry leader <br>in KDS</span><span style="font-size: inherit; color: #000000; font-family: arial, helvetica, sans-serif; background-color: transparent;">. With over 70,000 installs, our KDS has created smarter, more efficient <br>restaurants.</span></p>
<p><span style="font-family: arial, helvetica, sans-serif; color: #000000;"><br>I'm Ronald Simms, Senior Director of Sales at QSR Automations and work with many <br>restaurants in the Northeast.&nbsp;<span style="font-size: inherit; background-color: transparent;">I'd love to chat with you and get to know how I can help your restaurant.&nbsp;<br><br><strong>Are you currently in the market for a new KDS?</strong></span></span></p>
<p><span style="font-family: arial, helvetica, sans-serif; color: #000000;"><span color="#666666" face="trebuchet ms, geneva">1.) Sure, tell me more.<br></span><span style="font-size: inherit; background-color: transparent;">2.) Maybe. What can your KDS do differently?<br>3.) No, not at the moment, but please send over additional information.<br>4.) No, thank you.</span></span></p>
<p><span style="font-family: arial, helvetica, sans-serif; color: #000000;"><span style="font-size: inherit; background-color: transparent;"></span><span style="font-size: inherit; font-style: inherit; text-align: right; background-color: transparent;">Respond to this email with the number that best fits your interest.&nbsp;<br></span></span></p>
<hr><center><span style="font-family: arial, helvetica, sans-serif; color: #000000;"><strong style="color: inherit; font-size: inherit;"><img src="https://cdn2.hubspot.net/hubfs/2527126/Ron_circular_headshot.png" alt="Ron_circular_headshot" width="162" class="" align="center" style="width: 162px; max-width: 162px; margin-top: 0px; margin-bottom: 10px; float: left;"></strong></span></center>
<p style="text-align: left;"><span style="font-family: arial, helvetica, sans-serif; color: #000000;"><span style="font-size: 13px;"><br><span style="font-size: 12px;">Ronald Simms</span><br><span style="font-size: 12px;"><span style="background-color: transparent;">Sr. Director of Sales<br></span><strong style="color: inherit; font-size: inherit;">QSR Automations Inc.<br></strong>p&nbsp;|&nbsp;502.308.4009&nbsp;<br></span></span><span style="font-size: 12px;">m&nbsp;|&nbsp;502.590.6028</span></span><span style="font-size: inherit; font-style: inherit; text-align: right; background-color: transparent;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span></p>
<p style="text-align: left;"><span style="font-size: inherit; font-style: inherit; text-align: right; background-color: transparent;"> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span><span style="font-size: inherit; font-style: inherit; text-align: right; background-color: transparent;">&nbsp;</span><span style="color: #000000; font-family: arial, helvetica, sans-serif; font-size: inherit; background-color: transparent;">&nbsp;</span></p>
<hr>
<p><span style="font-family: arial, helvetica, sans-serif; color: #000000;"><span style="font-size: inherit; font-style: inherit; text-align: right; background-color: transparent;"> &nbsp;</span><span style="font-size: inherit; font-style: inherit; text-align: right; background-color: transparent;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</span></span></p>
<p style="text-align: center;"><br><span style="font-size: 20px; font-family: arial, helvetica, sans-serif; color: #000000;"><strong>We keep great company.&nbsp;</strong></span></p>
</td>
</tr>
</tbody>
</table>
<center></center>

0 Upvotes