Skip to content

Instantly share code, notes, and snippets.

@devlint

devlint/a_responsive_model.html

Created February 10, 2014 10:14
Show Gist options
  • Save devlint/8913460 to your computer and use it in GitHub Desktop.
Save devlint/8913460 to your computer and use it in GitHub Desktop.
Download ZIP
Email responsive notes
Raw
bug_space-Outlook.html
<style type="text/css">
table {border-collapse: collapse;}
</style>
<table border="0" width="600" cellspacing="0" cellpadding="0">
<tr>
<td>
<table align="left" width="198" border="0" cellpadding="0" cellspacing="0" style="border:1px solid #00CC99">
<tr>
<td bgcolor="#00CC99"><p style="mso-table-lspace:0;mso-table-rspace:0;">Content in 1</p></td>
</tr>
<tr>
<td bgcolor="#00CC99">Content in 1</td>
</tr>
</table>
<table align="left" width="198" border="0" cellpadding="0" cellspacing="0" style="border:1px solid #33FFFF">
<tr>
<td bgcolor="#33FFFF"><p style="mso-table-lspace:0;mso-table-rspace:0;">Content in 2</p></td>
</tr>
<tr>
<td bgcolor="#33FFFF">Content in 2</td>
</tr>
</table>
<table align="left" width="198" border="0" cellpadding="0" cellspacing="0" style="border:1px solid #993366">
<tr>
<td bgcolor="#993366"><p style="mso-table-lspace:0;mso-table-rspace:0;">Content in 3</p></td>
</tr>
<tr>
<td bgcolor="#993366">Content in 3</td>
</tr>
</table>
</td>
</tr>
</table>
Raw
html_basic.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>A Simple Responsive HTML Email</title>
<style type="text/css">
body {margin: 0; padding: 0; min-width: 100%!important;}
.content {width: 100%; max-width: 600px;}
</style>
</head>
<body yahoo bgcolor="#f6f8f1">
<table width="100%" bgcolor="#f6f8f1" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<table class="content" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
Hello!
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Raw
media-query-email.css
/***** QUELQUES ASTUCES CSS *****/
/*
Pour cibler un TD avec une class => passer par un sélecteur
d'attribut pour éviter que Yahoo ne l'utilise dans la version
desktop !
*/
@media only screen and (max-device-width: 400px) {
td[class="maClass"]{width: 100%;}
}
/*
Pour afficher une image différente sur mobile (donc via les MQ) :
avec le code html suivant :
td.maClass > a > img
*/
@media only screen and (max-device-width: 400px) {
td[class="maClass"] img{display: none;} /* il s'agit de l'image desktop */
td[class="maClass"] a{
display: block;
width: 320px; /* dimensions de l'image mobile */
height: 2580px; /* dimensions de l'image mobile */
background-image: url(../monImage.jpg); /* src de l'image mobile */
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment