Skip to content

Instantly share code, notes, and snippets.

@rosscooperman

rosscooperman/gist:f226bc1af2c24a5e0b17

Created September 5, 2014 19:36
Show Gist options
  • Save rosscooperman/f226bc1af2c24a5e0b17 to your computer and use it in GitHub Desktop.
Save rosscooperman/f226bc1af2c24a5e0b17 to your computer and use it in GitHub Desktop.
Download ZIP
Same old test template, brand new mobile version
Raw
gistfile1.html
<html>
<head>
<style type="text/css">
.mi-mobile{
display: none;
font-size: 0;
max-height: 0;
line-height: 0;
padding: 0;
float: left;
overflow: hidden;
mso-hide: all; /* hide elements in Outlook 2007-2013 */
}
@media only screen and (max-device-width: 480px), screen and (max-width: 480px) {
/* very important! all except 'all' and this current type get a display:none; */
.mi-desktop{ display: none !important; }
/* then show the mobile one */
.mi-mobile{
display: block !important;
font-size: 12px !important;
max-height: none !important;
line-height: 1.5 !important;
float: none !important;
overflow: visible !important;
}
}
</style>
</head>
<body style="margin: 0; padding: 0;">
<table cellspacing=0 cellpadding=0 border=0 class="mi-desktop">
<tbody>
<tr>
<td colspan=4 style="padding: 10px; white-space: collapse;">
<a href="http://www.google.com">
<img src="http://dummyimage.com/800x200/000/fff.png?text=1x1" />
</a>
</td>
</tr>
<tr>
<td colspan=2 style="padding: 10px; white-space: collapse;">
<img src="http://dummyimage.com/390x180/3ad7ff/000.png?text=2x1"/>
</td>
<td colspan=2 style="padding: 10px; white-space: collapse;">
<a href="http://movableink.com">
<img src="http://dummyimage.com/390x180/3ad7ff/000.png?text=2x2"/>
</a>
</td>
</tr>
<tr>
<td style="padding: 10px; white-space: collapse;">
<a href="http://nytimes.com">
<img src="http://dummyimage.com/185x140/d33682/000.png?text=3x1"/>
</a>
</td>
<td style="padding: 10px; white-space: collapse;">
<a href="#">
<img src="http://dummyimage.com/185x140/d33682/000.png?text=3x2"/>
</a>
</td>
<td style="padding: 10px; white-space: collapse;">
<img src="http://dummyimage.com/185x140/d33682/000.png?text=3x3"/>
</td>
<td style="padding: 10px; white-space: collapse;">
<a href="http://localhost:3000/p/cp/3ff/c?url=http%3A%2F%2Fwww.google.com%2F">
<img src="http://dummyimage.com/185x140/d33682/000.png?text=3x4"/>
</a>
</td>
</tr>
</tbody>
</table>
<table cellspacing=0 cellpadding=0 border=0 class="mi-mobile">
<tbody>
<tr>
<td colspan=4 style="padding: 10px; white-space: collapse;">
<img src="http://dummyimage.com/800x200/000/fff.png?text=4x1" width="100%" />
</td>
</tr>
<tr>
<td colspan=2 style="padding: 10px; white-space: collapse;">
<img src="http://dummyimage.com/390x180/3ad7ff/000.png?text=5x1" width="100%" />
</td>
<td colspan=2 style="padding: 10px; white-space: collapse;">
<img src="http://dummyimage.com/390x180/3ad7ff/000.png?text=5x2" width="100%" />
</td>
</tr>
<tr>
<td style="padding: 10px; white-space: collapse;">
<img src="http://dummyimage.com/185x140/d33682/000.png?text=6x1" width="100%" />
</td>
<td style="padding: 10px; white-space: collapse;">
<img src="http://dummyimage.com/185x140/d33682/000.png?text=6x2" width="100%" />
</td>
<td style="padding: 10px; white-space: collapse;">
<img src="http://dummyimage.com/185x140/d33682/000.png?text=6x3" width="100%" />
</td>
<td style="padding: 10px; white-space: collapse;">
<img src="http://dummyimage.com/185x140/d33682/000.png?text=6x4" width="100%" />
</td>
</tr>
</tbody>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment