I've developed a responsive email and used mailchimp + litmus to test it. When it worked as expected, I sent it to the engineers but they're using AWS SES icm with velocity template to send the emails, and somehow this is not responding to the responsive layout.
This is what my layout looks like:
<style type="text/css">
* { margin: 0px; padding: 0px; }
body { background: #e7e6e5; }
.wrapper { padding: 100px 0 50px 0; width: 100%; background: #e7e6e5; }
.centering { position: relative; margin: 0 auto; width: 500px; overflow: hidden; }
.inner { border-radius: 4px; }
.book { padding: 25px 0px; background: #8dc763; }
.content { padding: 45px 50px 40px 50px; text-align: left; }
.content p { padding: 0px; margin: 0px; font-family: Arial, Helvetica, sans-serif; color: #424444; font-size: 17px; line-height: 24px;}
.order, .order1 { border-bottom: #dcdcde solid 2px; }
.order p { padding: 0px; margin: 0px; font-size: 14px; color: #a1a1a1; line-height: 18px; }
.order td { padding: 14px 0; }
.order1 td { padding: 24px 0; }
.order1 p { padding: 0px; margin: 0px; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 20px; color: #a1a1a1; }
.order1 p strong { color: #000; }
.total { padding: 25px 0px 20px 0px; }
.total p strong { color: #000; }
.button { padding: 25px 0px 10px 0px; }
.footer { padding: 28px 0px 28px 0px; }
.footer p { padding: 0px; margin: 0px; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 18px; color: #7d7d7d; text-align: center; }
.footer a { color: #7d7d7d; text-decoration: none; }
.intro_text { padding-bottom: 24px; }
@media only screen and (max-width: 480px){
.centering { width: 100% !important; }
.content { padding: 45px 20px 40px 20px !important; }
.wrapper { padding: 0px 0px 20px 0 !important; }
.content p { font-size: 14px !important; }
.content { padding: 45px 20px 40px 20px !important; }
.content .order1 p { font-size: 12px !important; }
}
</style>
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
etc..
Is there a solution to fixing the responsiveness?
Aucun commentaire:
Enregistrer un commentaire