Hallo zusammen,
ich würde gerne die Email-Templates jetzt auf responsive umstellen. Da mittlerweile viele KundInnen schon nachgefragt haben, wieso wir keine "hübschen" Mails versenden, wird es wohl Zeit, die Optik anzugehen und die im Shop enthaltenen Vorlagen sind schon ziemlich altbacken und nicht responsive.
Ein erster Versuch ist jetzt aber gescheitert, sobald ich hier css einbinde. Dann scheint es wohl mi dem Ersetzen der Variablen nicht mehr zu funktionieren. Könnte demnach an Smarty liegen, schätze ich mal. Die Mail ist so aufgebaut:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Order</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
<style type="text/css">
@charset "utf-8";
/* CSS Document */
@font-face {
font-family: 'Lato', sans-serif;
}
@media screen and (max-width: 768px) and (min-width: 390px) {
body {
margin: 0 auto !important;
width: 600px !important;
}
.wrapper_table {
width: 600px !important;
margin:0 auto;
text-align:center;
}
.padding {
width: 20px !important;
}
.logo{
width: 200px !important;
}
.navbar{
width: 400px !important;
}
.content{
width: 600px !important;
}
.content_row {
width: 560px !important;
}
.one_third {
width: 170px !important;
margin-bottom: 30px;
}
.one_third img {
max-width: 170px !important;
}
.one_half {
width: 270px !important;
}
.noresponsive {
display: none;
}
.content_row img {
max-width: 560px !important;
height: auto !important;
}
.one_half img {
max-width: 270px !important;
}
.image_standard {
width: auto !important;
height: auto !important;
}
.one_quarter img {
max-width: 136px !important;
}
.one_quarter {
width: 136px !important;
}
.address_bar {
width: 290px !important;
}
}
.....
Wie muss ich das anpassen, damit es funktioniert? Vielen Dank!