Community Forum

Over the years we have built up a community of email marketers, coders and designers that live and breathe email.

Use the Email on Acid Forum like your virtual water cooler: Stop by to discuss email code, quirky clients and fixes and post your issues (with an example of the code) for our community to offer its assistance.

 
   
Responsive Design: Table not aligning on mobile layout w/ 1 px gap ?

bleacherbum54

Newbie
Total Posts:  5
Posted: 15 February 2017 07:18 AM

I have a table built but the image slices will not align on a mobile view, instead there is a 1 px gap at the top & bottom of the middle <tr>. I have checked my math to make sure each image slice adds up to the correct width of 640px.

Any suggestions on how to get rid of the 1 px gap between slices?

<table cellpadding=“0” cellspacing=“0” border=“0” bgcolor=”#ffffff” align=“center”>
<tr>
<td width=“640”>

<table width=“100%” cellpadding=“0” cellspacing=“0” border=“0” bgcolor=”#ffffff”>
<tr>
<td colspan=“3” style=“border-top:3px solid #ab152b;”>FR_room_top.jpg</td>
</tr>
<tr>
<td>FR_handL.jpg</td>
<td>FR_animation_tablet.gif</td>
<td>FR_handR.jpg</td>
</tr>
<tr>
<td colspan=“3”>FR_room_bottom.jpg</td>
</tr>
</table>
</td>
</tr>
</table>


 

Alex Ilhan

Avatar
Administrator
Total Posts:  210
Posted: 15 February 2017 10:03 PM
[ # 1 ]

Hey bleacherbum54,

Welcome back to the forums!

This is a bit tricky to diagnose without seeing the full code and the screenshot of the issue(s). However, one fix you can try is to add style=“display:block;border:0” to your images.

Cheers,
Alex


 

bleacherbum54

Newbie
Total Posts:  5
Posted: 16 February 2017 01:23 AM
[ # 2 ]

Thank you for the kind welcome Alex. I find this site & forum a great resource.

I tried adding “border:0” to the img style tags but still have a mysterious 1px gap when the table responds to a screen size below 640px (max-width:640px). I noticed that when I removed “height:auto; display:block;”, the table alignment does not break, but the resulting image is skewed. I have a screenshot of the break:

Image Attachments
table.jpg

 

bleacherbum54

Newbie
Total Posts:  5
Posted: 16 February 2017 01:46 AM
[ # 3 ]

here is the html for the table:

Image Attachments
code.jpg

 

Alex Ilhan

Avatar
Administrator
Total Posts:  210
Posted: 19 February 2017 09:23 PM
[ # 4 ]

Hi bleacherbum54,

Could you please upload your HTML as a .html attached file? Please. I will investigate for you.

Cheers!
Alex


 

bleacherbum54

Newbie
Total Posts:  5
Posted: 21 February 2017 01:20 AM
[ # 5 ]

Here is the html. I would really like to get this animation looking good and scaling down in mobile, any help would be much appreciated! Thanks!

File Attachments
index.html  (File Size: 13KB - Downloads: 161)