BL
1
Image width 100% not relative to table cell in Outlook?
Hi there,
I am about to make 15 different modules, but i am already struggeling on the first one. The code works perfectly in all clients except in gte mso 9. It seems like my image width on 100% which I expected to fill out 100% of the current table cell, and not the 100% of the image width (or whatever happens).
Maybe it's also because the two tabels are stacked under each other in Outlook, which it's only ment to on mobile devices.
I simplay can't figure out how to solve this. Any good suggestions? :)
Thanks you!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
@media only screen and (max-width: 620px) {
/* mobile-specific CSS styles go here */
table, td {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
table[class=wrapper] {
width: 100% !important;
}
table[class=onMobile100] {
width: 100% !important;
}
td[class=onMobile50] {
width: 50% !important;
}
}
/* regular CSS styles go here */
table.wrapper {
width: 620px;
}
</style>
</head>
<body>
<table class="onMobile100" width="620px" border="0" align="center">
<tr>
<td>
<table class="onMobile100" align="left" width="305">
<tr>
<td class="onMobile50"><img alt="product" width="100%" src="http://northdigital.dk/ccnewsletter/556600_1.jpg"></td>
<td class="onMobile50"><img alt="product" width="100%" src="http://northdigital.dk/ccnewsletter/556600_1.jpg"></td>
</tr>
</table>
<table class="onMobile100" align="left" width="305">
<tr>
<td class="onMobile50"><img alt="product" width="100%" src="http://northdigital.dk/ccnewsletter/556600_1.jpg"></td>
<td class="onMobile50"><img alt="product" width="100%" src="http://northdigital.dk/ccnewsletter/556600_1.jpg"></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Is this what you are trying to achieve?
Hi Charlie,
Thanks! Very interesting! Almost this yes, just on desktop i wan't the images side by side all 4, on a row.
This code here is very very close. Just need to prevent the tables from stacking under each other in outlook.
Problem solved! Thanks.