I've been trying to figure this out all day. Been busting my head and still can't figure it out. I'm writing up an HTML email:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=false" />
</head>
<style media="screen" type="text/css">
#headerbar {width:100%;background-color:#7FCBD8;text-align:center;color:#FFFFFF;}
#greeting {width:500px;margin:20px auto;text-align:left;padding:0 0.5em;font-size:1.4em;}
#bodytext {width:500px;margin:0px auto;text-align:left;padding:0 0.5em;font-size:1.2em}
body {margin:0;padding:0;font-family:Helvetica Neue;}
</style>
<style media="screen and (max-device-width:640px)">
#greeting {width:400px;font-size:1.2em;}
</style>
<body>
<center>
<div id="headerbar">
NewsLetter
</div>
<div id="greeting">
Hello <span style="color: #7FCBD8"><b>@{{ user.username }}</b></span>,
</div>
<div id="bodytext">
<p>
We would like to update you with news around the community.
</p>
</div>
</center>
</body>
</html>Everything seems to be working great on all Desktop browsers. Firefox & Chrome don't have any issues. But on the native Mail app on the iPhone, the content is not 100% full width. There seems to be a blank space on the right hand side! How can I fix this?
It is not blank space on the right hand side, but your calculations are making the boundary extend beyond iPhone screen (320px width). My suggestion would be not to use static measurement values and also to take into consideration your padding and margin values when assigning width.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=false" />
</head>
<style media="screen" type="text/css">
#headerbar {width:100%;background-color:#7FCBD8;text-align:center;color:#FFFFFF;}
#greeting {text-align:left;padding:0px;font-size:1.4em;}
#bodytext {margin:20px;text-align:left;padding:0 0.5em;font-size:1.2em}
body {margin:0;padding:0;font-family:Helvetica Neue;}
</style>
<style media="screen and (max-device-width:640px)">
#greeting {width:100%;font-size:1.2em;}
</style>
<body>
<center>
<div id="headerbar">
NewsLetter
</div>
<div id="greeting">
Hello <span style="color: #7FCBD8"><b>@{{ user.username }}</b></span>,
</div>
<div id="bodytext">
<p>
We would like to update you with news around the community.
</p>
</div>
</center>
</body>
</html>The values I have changed might effect your design, however it is a good point to start fixing the issue.
I've been trying to figure this out all day. Been busting my head and still can't figure it out. I'm writing up an HTML email:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=false" />
</head>
<style media="screen" type="text/css">
#headerbar {width:100%;background-color:#7FCBD8;text-align:center;color:#FFFFFF;}
#greeting {width:500px;margin:20px auto;text-align:left;padding:0 0.5em;font-size:1.4em;}
#bodytext {width:500px;margin:0px auto;text-align:left;padding:0 0.5em;font-size:1.2em}
body {margin:0;padding:0;font-family:Helvetica Neue;}
</style>
<style media="screen and (max-device-width:640px)">
#greeting {width:400px;font-size:1.2em;}
</style>
<body>
<center>
<div id="headerbar">
NewsLetter
</div>
<div id="greeting">
Hello <span style="color: #7FCBD8"><b>@{{ user.username }}</b></span>,
</div>
<div id="bodytext">
<p>
We would like to update you with news around the community.
</p>
</div>
</center>
</body>
</html>Everything seems to be working great on all Desktop browsers. Firefox & Chrome don't have any issues. But on the native Mail app on the iPhone, the content is not 100% full width. There seems to be a blank space on the right hand side! How can I fix this?
It is not blank space on the right hand side, but your calculations are making the boundary extend beyond iPhone screen (320px width). My suggestion would be not to use static measurement values and also to take into consideration your padding and margin values when assigning width.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=false" />
</head>
<style media="screen" type="text/css">
#headerbar {width:100%;background-color:#7FCBD8;text-align:center;color:#FFFFFF;}
#greeting {text-align:left;padding:0px;font-size:1.4em;}
#bodytext {margin:20px;text-align:left;padding:0 0.5em;font-size:1.2em}
body {margin:0;padding:0;font-family:Helvetica Neue;}
</style>
<style media="screen and (max-device-width:640px)">
#greeting {width:100%;font-size:1.2em;}
</style>
<body>
<center>
<div id="headerbar">
NewsLetter
</div>
<div id="greeting">
Hello <span style="color: #7FCBD8"><b>@{{ user.username }}</b></span>,
</div>
<div id="bodytext">
<p>
We would like to update you with news around the community.
</p>
</div>
</center>
</body>
</html>The values I have changed might effect your design, however it is a good point to start fixing the issue.
0 commentaires:
Enregistrer un commentaire