Hi

I have been stuck 2 days on a issue with the gmail app not showing mobile only images:


<a href="#" class="desktop"><img src="http://archibaldbutler.com/projects/picasso/reseller/cta-grey-1.jpg" width="334" height="29" alt="Acheter" title="Acheter" class="desktop" style=";border-style:none;max-width:334px;display:block" /></a>
                                                                  <div class="phoneonly-img1"  style="font-size:0;max-height:0;overflow:hidden;display:none;mso-hide:all;" title="gmail-fix">
                                                                     <a href="#"><img src="http://archibaldbutler.com/projects/picasso/reseller/cta-grey-1-mob.png" width="100%" height="auto" class="phoneonly-img1" style="display:block!important;border-style:none;width:100% !important;font-size:1px;line-height:1px;color:#000000;text-decoration:none;margin-bottom:3%;" border="0" alt="Acheter" title="gmail-fix" /></a>
                                                                  </div>
                                                               </th>
                                                               <th valign="top" class="small-12 large-6 columns first last nopad sized">
                                                                  <a href="#" class="desktop"><img src="http://archibaldbutler.com/projects/picasso/reseller/cta-grey-2.jpg" width="334" height="29" alt="En savoir plus" title="En savoir plus" class="desktop" style="border-style:none;display:block;max-width:334px;" /></a>
                                                                  <div class="phoneonly-img2"  style="font-size:0;max-height:0;overflow:hidden;display:none;mso-hide:all;" title="gmail-fix">
                                                                     <a href="#"><img src="http://archibaldbutler.com/projects/picasso/reseller/cta-grey-2-mob.png" width="100%" height="auto"  class="phoneonly-img2" style="display:block!important;width:100% !important;font-size:1px;border-style:none;line-height:1px;color:#000000;text-decoration:none;margin-bottom:3%;" border="0" alt="En savoir plus" title="gmail-fix" /></a>
                                                                  </div>

CSS:


 * [title="gmail-fix"] {
         width: 100% ;
         max-width: 600px ;
         height: auto;
         display:block!important;
         max-height: none !important;
         visibility:visible !important;
         overflow:visible !important;
         }

         img[class~=phoneonly-img1],
         img[class~=phoneonly-img2],
         img[class~=phoneonly-img3],
         img[class~=phoneonly-img4] {
         display:block !important;
         overflow:visible !important;
         visibility:visible !important;
         width:100% !important;
         height:auto !important;
         text-align:center !important;
         }

HTML file:
http://archibaldbutler.com/projects/picasso/reseller-FRFR_Q117_APR_Email_v3.html

Screenshot:
http://archibaldbutler.com/projects/picasso/buggmailapp.jpg
Note : The main image works now, it is just the 2 buttons on mobile in the display:none div

Any help much appreciated. I have tried so many solutions but to no avail.
Thanks
Archie.