SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Location
    Melbourne, Australia
    Posts
    46
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Tips on how to align text responsively?

    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.

    Code:
    <!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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,596
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    At the moment, you have it centered inline, so you could override that in the <head> with styles like this:

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

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Location
    Melbourne, Australia
    Posts
    46
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Yup, ok. I've flipped that around (I wanted it right aligned on larger screens, so the media query is correct).

    Code:
    @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:

    Code:
    @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. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,596
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    I'm a little confused, at these seem contradictory to me:

    Code:
    @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. #5
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Location
    Melbourne, Australia
    Posts
    46
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,596
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by cheli View Post
    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.
    Duh, I didn't read it very carefully. On first glance, it looked like it was all part of the same @media rule.

  7. #7
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Location
    Melbourne, Australia
    Posts
    46
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I've made so many gaffs in your presence I'm inclined to believe you did that just to make me feel better

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,596
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by cheli View Post
    I'm inclined to believe you did that just to make me feel better
    Of course.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •