I’m working on an email template (yup, the SAME one, if you’ve been following my posts. I’m progressing, promise!).
At the top of the design I have some teaser text. On larger screens I’d like that to align to the right, but on smaller screens I’d like it to centre align.
I don’t think I understand correctly how to ‘override’ the larger screen styling because I’ve tried adjusting a couple of different selectors without the result I’m looking for.
The current code is here, but as that has inline styling I’ve also included the embedded version I make my edits on below.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" name="robots" content="text/html; charset=utf-8" noindex; nofollow">
<meta property="og:title" content="">
<meta name="viewport" content="width=device-width">
<title></title>
<style type="text/css">
/* Client-specific Styles */
#outlook a{padding:0;} /* Force Outlook to provide a "view in browser" button. */
body{width:100% !important;} .ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail to display emails at full width */
body{-webkit-text-size-adjust:none;} /* Prevent Webkit platforms from changing default text sizes. */
/* Reset Styles */
body{margin:0; padding:0;}
img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}
table td{border-collapse:collapse;}
#backgroundTable{height:100% !important; margin:0; padding:0; width:100% !important;}
/* Smaller Screen Styles */
@media only screen and (max-width: 480px) {
table[id=backgroundTable]{
max-width:600px !important;
width:100% !important;
}
table[id=contentWrapper],[class=header],[class=contentTable]{
width:320px !important;
}
table[class=header] td{
text-align: center; !important;
}
td[class=logo] img{
padding-bottom:0; !important;
}
td[class=image] img{
height:auto !important;
width:100% !important;
}
}
/* Template Styles */
body, #backgroundTable{
background-color:#FAFAFA;
}
.contentTable{
background-color:#FFF;
}
h1, h2, h3, h4, p{
font-family:Helvetica, Arial, sans-serif;
text-align:center;
}
h1, h2{
color:#939598;
font-size:22px;
line-height:100%;
}
h3{
color:#2755A1;
font-size:26px;
line-height:100%;
}
p{
color:#000;
font-size:13px;
line-height:150%;
}
.header p{
color:#939598;
}
a{
color:#2755A1;
}
.nobr {
white-space: nowrap;
padding-left:0px;
padding-right:0px
}
</style>
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
<center>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="backgroundTable">
<tr>
<td align="center" valign="top">
<table id="contentWrapper" align="center" border="0" cellpadding="0" cellspacing="0" height="100%" width="600px">
<tr>
<td align="center" valign="bottom" height="72px">
<!-- // Begin Template Preheader \\\\ -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<table cellpadding="0" cellspacing="0" width="180px" align="left" class="header">
<tr>
<td valign="bottom" class="logo">
<a href="http://www.wehi.edu.au" target="_blank">
<img src="http://www.wehi.edu.au/uploads/e-mail/WEHI_logo.png" alt="Walter and Eliza Hall Institute logo" title="institute logo" style="width:180px; height:42px; padding-top: 10px; padding-right:10px; padding-bottom:10px;">
</a>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" width="410px" class="header">
<tr>
<td valign="bottom">
<p>Can't view this event invitation? <span class="nobr"><a href="" target="_blank">View it in your browser.</a></span></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- // Begin Template Main message \\\\ -->
<table border="0" cellpadding="20" cellspacing="0" width="600px" class="contentTable">
<tr>
<td align="center" valign="top">
<h1>Inviter</h1>
<h2>is pleased to invite <br />
<em>you</em></h2>
<h3>to "event title"</h3>
<p>"purpose"<br />
at "location"<br />
on "day, date month at time"</p>
<h4>RSVP: "name" by "day, date month"</h4>
<p><a href="">By email</a> or phone (03) 0000 0000<br />
please advise of any dietary requirements</p>
<p>Dress code: "code"<br />
"parking directions"</p>
</td>
</tr>
</table>
<table border="0" cellpadding="10" cellspacing="0" width="600px" class="contentTable">
<tr>
<td align="center" valign="top" class="image">
<a href="" target="_blank">
<img src="http://placehold.it/580x300" alt="" style="border:none;display:block; max-width:100%; max-height:100%"/>
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</body>
</html>