[Gmail app] 100% width sections don't work properly

Hello,

I have 2 sections in an email I am working on that are supposed to be 100% wide and have center aligned images in them.
However in the Gmail app (android) they became left aligned and the background colour only extent to the range of the image and not to the full width.

Here is how it looks: http://prntscr.com/6rmqbq , http://prntscr.com/6rmqhc

I've tried a lot of things but I don't seem to be able to solve it.
Anyone encountered a similar issue? What could be wrong here?

Here is the full code of the email: http://snipsave.com/user/profile/balintsipos#10714

sbi85, 1 year ago

I have messed around a lot with the code and made some progress.

Apart from setting the min-width to 320px for these blue areas, I inserted empty <td>s in these blue areas and they seem fix the issue and don't seem to cause issues in other email clients. Wohoo!

Here is the code. Notice the 200px wide empty <td>s

<tr>
                           <td bgcolor="#1c96d8"style="font-family: Arial, sans-serif; font-size: 20px; color: #5e6a71;" align="center"><table class="container" width="500" border="0" cellspacing="0" cellpadding="0">
                             <tr>
                               <td width="200" align="center"></td>
                               <td width="30" align="center" style="font-family: 'Gotham A', 'Gotham B', Helvetica, sans-serif; font-style: normal;"><a href="http://www.twitter.com/idioplatform" target="_blank"><img style="display:block; font-decoration:none; color:#e98300; border:none;" border="0" src="http://www2.idioplatform.com/l/20742/2015-02-13/t11wf/20742/48684/twitter_4_128.png" width="30" height="30" alt="t"/></a></td>
                                 <td width="40" align="center"></td>

                               <td width="30" align="center" style="font-family: 'Gotham A', 'Gotham B', Helvetica, sans-serif; font-style: normal;"><a href="http://www.linkedin.com/company/idio-ltd" target="_blank"><img style="display:block; font-decoration:none; color:#e98300; border:none;" border="0" src="http://www2.idioplatform.com/l/20742/2015-02-13/t11wc/20742/48682/linkedin_4_128.png" width="30" height="30" alt="in"/></a></td>
                               <td width="200" align="center"></td>
                             </tr>
                           </table></td>
                         </tr>

BUT there is still the squished calendar that I cannot seem to fix: http://prntscr.com/6s0vbb

If anyone have an idea I am very happy to listen. I guess a solution would be to change the HTML calendar to an image. But I really like the idea to create that using HTML only.

Here is the full code of the email: http://snipsave.com/user/profile/balintsipos#10721

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098