My team and I have been trying to create seamless two column layouts with images. The reason we are doing this is to have two unique links for a products in an email. We just want them to appear seamless so we can have and atmospheric background. However, when we try to do this, on iPhone devices and android devices is there is a 1px space added when the email shrinks down. Is there anything that can be done about this? Otherwise, we are not able to do layouts like the one below.
Check out the results on email on acid (check the mobile devices):
https://www.emailonacid.com/app/acidtest/display/summary/B8pgYGwXq6l48eDtZDpXObGQ9fciD7SBlHbsfI4f3x9uw/shared
Notice the spacer down the middle. I added a background color to the table so you could see the issue that happens when the images shrink on mobile.
Sometimes the gap appears on both columns.
Sometimes the gap appears between the rows.
INKY markup for the columns. Note that the columns are nested. the class called "no-padding-b" just removed the default padding on the bottom of the rows because in some cases we want the rows to appear seamless in addition to the seamless columns.
ALSO I USE PANNINI IN MY MARKUP BELOW. IF YOU WANT TO TEST THIS, YOU WILL HAVE TO ADD SOME TEMP URLS.
<!-- 2 columns CTA / non collapsable / no gutter -->
<row class="no-padding-b">
<columns>
<row class="collapse no-padding-b">
<columns small="6" large="6">
<a href="{{ variables.root-portal }}/asics-gel-cumulus-18-asics-blue-silver-safety-yellow" title="Women's ASICS GEL-Cumulus 18" target="_blank">
<img class="small-float-center" src="http://assets.cat5.com/newsletter/runningshoes/2016/061516-a/061516-cta-01.jpg" width="290" height="425" alt="Women's ASICS GEL-Cumulus 18">
</a>
</columns>
<columns small="6" large="6">
<a href="{{ variables.root-portal }}/asics-gel-cumulus-18-imperial-safety-yellow-black" title="Men's ASICS GEL-Cumulus 18" target="_blank">
<img class="small-float-center" src="http://assets.cat5.com/newsletter/runningshoes/2016/061516-a/061516-cta-02.jpg" width="290" height="425" alt="Men's ASICS GEL-Cumulus 18">
</a>
</columns>
</row>
<row class="collapse no-padding-b">
<columns small="6" large="6">
<a href="{{ variables.root-portal }}/asics-gel-kinsei-6-lapis-black-silver-flash-coral" title="Women's ASICS Kinsei 6" target="_blank">
<img class="small-float-center" src="http://assets.cat5.com/newsletter/runningshoes/2016/061516-a/061516-cta-03.jpg" width="290" height="425" alt="Women's ASICS Kinsei 6">
</a>
</columns>
<columns small="6" large="6">
<a href="{{ variables.root-portal }}/asics-gel-kinsei-6-poseidon-carbon-copper-black" title="Men's ASICS Kinsei 6" target="_blank">
<img class="small-float-center" src="http://assets.cat5.com/newsletter/runningshoes/2016/061516-a/061516-cta-04.jpg" width="290" height="425" alt="Men's ASICS Kinsei 6">
</a>
</columns>
</row>
<row class="collapse no-padding-b">
<columns small="6" large="6">
<a href="{{ variables.root-portal }}/asics-gt-2000-4-lapis-safety-yellow-soothing-sea" title="Women's ASICS GT-2000 4" target="_blank">
<img class="small-float-center" src="http://assets.cat5.com/newsletter/runningshoes/2016/061516-a/061516-cta-05.jpg" width="290" height="425" alt="Women's ASICS GT-2000 4">
</a>
</columns>
<columns small="6" large="6">
<a href="{{ variables.root-portal }}/asics-gt-2000-4-safety-yellow-onyx-carbon" title="Men's ASICS GT-2000 4" target="_blank">
<img class="small-float-center" src="http://assets.cat5.com/newsletter/runningshoes/2016/061516-a/061516-cta-06.jpg" width="290" height="425" alt="Men's ASICS GT-2000 4">
</a>
</columns>
</row>
<row class="collapse no-padding-b">
<columns small="6" large="6">
<a href="{{ variables.root-portal }}/asics-gel-noosa-tri-11-poseidon-safety-yellow-cockatoo" title="Women's ASICS GEL-Noosa Tri 11" target="_blank">
<img class="small-float-center" src="http://assets.cat5.com/newsletter/runningshoes/2016/061516-a/061516-cta-07.jpg" width="290" height="425" alt="Women's ASICS GEL-Noosa Tri 11">
</a>
</columns>
<columns small="6" large="6">
<a href="{{ variables.root-portal }}/asics-gel-noosa-tri-11-carbon-silver-hot-orange" title="Men's ASICS GEL-Noosa Tri 11" target="_blank">
<img class="small-float-center" src="http://assets.cat5.com/newsletter/runningshoes/2016/061516-a/061516-cta-08.jpg" width="290" height="425" alt="Men's ASICS GEL-Noosa Tri 11">
</a>
</columns>
</row>
</columns>
</row>
<!-- /2 columns CTA / non collapsable / no gutter -->
Anyone have any ideas on this? I thought about bullet proof backgrounds, but that seems a bit too tedious for something so small.