I'm currently working on optimizing my company's email layout for better mobile responsiveness. Unfortunately, due to the constraints of email designing, I find myself resorting to old-school techniques like using tables and image slices.
My current setup involves tables with specific widths but no fixed heights. Each table consists of one row and typically 2-3 columns, with one image per table cell. At the moment, I have not defined the dimensions of the table cells or images.
Here is the new responsive code that I am experimenting with:
@media (max-width: 670px) {
body {
background-color: red !important; /* for testing */
}
table {
width: 100% !important;
height: auto !important;
}
table img {
width: 100% !important;
height: auto !important;
}
}
@media (max-width: 480px) {
body {
background-color: blue !important; /* for testing */
}
}
http://codepen.io/BevansDesign/pen/CnAfB
If you take a look at my Codepen page and resize the window width, you'll notice that the graphics adjust accordingly. However, in Chrome, there seem to be gaps between the images (green lines) caused by pixel-based scaling issues. This works fine in Firefox, doesn't work well in IE8 as expected, and I haven't tested it on other browsers yet.
Does anyone have suggestions on how to eliminate these gaps? I've attempted setting the image height to 100%, but this only maintains the original height of the images and distorts them horizontally.
I understand that manually setting all dimensions could resolve this issue, but I'm seeking a solution that requires minimal adjustments, considering the frequency at which I send out emails each week.
Thank you for your assistance!