iPhone Responsive Design Reformats Text in a Table
SOLVE
Hello,
I'm having trouble controlling the iPhone reformatting of text in a table. For some reason, the text is only taking up half of the space when I veiw on the iPhone 6 Plus. In the preview function in Hubspot, the reformatting looks fine. Is there some code I need to add in the table?
P.S. I have very limited knowledge of CSS and beginner-level of HTML. So, easy directions would be great:-)
iPhone Responsive Design Reformats Text in a Table
SOLVE
@rbeditor yes, media queries reference the size of the screen and do not take into account device types, so they will function for Androids and iPhones alike.
I'm not seeing much in the attached file - would you mind specifying whether the email in question is using a custom HTML template or a HubSpot template, whether you have set to it be responsive in HubSpot, and also the internal name of the email so that I can look at it in your portal? Thanks!
iPhone Responsive Design Reformats Text in a Table
SOLVE
I started with with a Hubspot template, but then made custom changes to it, using code to file and adding modules. Yes, i orginally used a hubspot responsive design before I made custom changes to it. The internal file name is: DOC_TOC_Template_Winter_2017_New_LinkCSS.html
I was able to find what was causing the text from not filling out its tables, but you might need to play around with the template some more in order to resolve the issue.
The text in your tables was being contrained by two fixed widths that are repeated throughout the template. For instance, on l. 544-550:
<table style="height: 30px;" width="230">
<tbody>
<tr>
<td style="width: 35px;" valign="top"><img style="max-width: 50px;" src="https://cdn2.hubspot.net/hubfs/2621416/DOC/Bud_50x50.jpg" alt="Bud_50x50.jpg" width="50" height="50" class="" align="left"></td>
<td style="width: 0px;"> </td>
<td style="width: 195px; text-align: justified;"><span style="font-family: arial, helvetica, sans-serif; font-size: 14px;">While the notion of "digital transformation" is not new, it is still misunderstood...</span><span style="font-family: arial, helvetica, sans-serif; font-size: 10px;">(READ MORE)</span></td>
</tr>
If we change the width="230" and width: 195px;, this will allow the text to fill out more. I changed both widths to 400px with the Chrome developer tools here:
If you add elements to your @media only screen and (max-width: 480px) media query on l. 269, changing table and td widths to 400px or similar, you should be able to improve the responsiveness of this text.
iPhone Responsive Design Reformats Text in a Table
SOLVE
@rbeditor yes, media queries reference the size of the screen and do not take into account device types, so they will function for Androids and iPhones alike.