Tips on how to align text responsively?

HTML & CSS
1

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>
2

At the moment, you have it centered inline, so you could override that in the <head> with styles like this:

@media only screen and (min-width: 1020px) {
  .header p {text-align: right !important;
}
3

Yup, ok. I’ve flipped that around (I wanted it right aligned on larger screens, so the media query is correct).

@media only screen and (max-width: 480px) {
			table[class=header] p{
				text-align: center; !important;
			}
}
		.header p{
			color:#939598;
			text-align: right;
		}

All good. Except now the logo aligns to the left on smaller screens. I can fix this with an adjustment in my media query:

@media only screen and (max-width: 480px) {
			table[class=header] td{
				text-align: center; !important;
			}
}

Yay! But it niggles at me that I’ve had to write two styles to have essentially the same effect on the logo image and teaser text. Is there a smarter way to do this?

4

I’m a little confused, at these seem contradictory to me:

@media only screen and (max-width: 480px) {
			table[class=header] p{
				text-align: center; !important;
			}
}
		.header p{
			color:#939598;
			text-align: right;
		}

Anyhow, note that you can’t have a ; before !important. It would need to

text-align: center !important;

So it seems you don’t need !important at all, as it isn’t applying anyway.

5

Hi Ralph,

Those style are contradictory, but only in the sense that the .header p style applies until the screen width is less than 480px, in which case the table[class=header] p style applies.

Thanks for the tip re: the semi colon before the !important. I didn’t know about that, so I’ve fixed up my code :slight_smile:

6

Duh, I didn’t read it very carefully. :blush: On first glance, it looked like it was all part of the same @media rule.

7

I’ve made so many gaffs in your presence I’m inclined to believe you did that just to make me feel better :wink:

8

Of course. :shifty: