i using display:block appropriate on td cells class of column, logo , call td cells not stacking vertically when resized mobile size.
it's adding 100% width them that's not taking 100% of screen when on mobile size.
jsfiddle: http://jsfiddle.net/7bm95wrm/
html
<body> <table cellspacing="0" cellpadding="0" border="0" width="100%"> <tr> <td bgcolor="#ffffff" align="center"> <table width="650px" cellspacing="0" cellpadding="3" class="container"> <tr> <td class="alignright greytext" style="font-size: 12px;">having problems reading email. don't panic! <a href="#" class="bold">click here</a> can read in browser.</td> </tr> </table> </td> </tr> <tr> <td class="navbar navbar-inverse" align="center"> <!-- setup makes nav background stretch whole width of screen. --> <table width="650px" cellspacing="0" cellpadding="3" class="container"> <tr class="navbarbg navbar-inverse"> <td class="column"><img src="images/logo.jpg" alt="" title="" width="216" height="54" /></td> <td colspan="2"> <table class="whitetext" width="400"> <tr> <td class="smalltext alignright" valign="bottom"> call: 0161 482 7650<br /> <h2 class="lucidafont">more leasing</h2> </td> </tr> </table> </td> </tr> </table> </td> </tr> <tr> <td bgcolor="#ffffff" align="center"> <table width="650px" cellspacing="0" cellpadding="3" class="container toppadding"> <tr> <td> <h1 class="bluetext">thank downloading<br /> leasing landscape</h1> </td> </tr> <tr> <td class="greytext bodytext"> <h2 class="bluetext">dear [name],</h2> <p>thank downloading leasing landscape - we're sure you'll find useful.</p> <p>to view copy of guide, please click here: <a href="#" alt="" title="">[link]</a></p> <p>regards,</p> <h2 class="bluetext">the team @ ch&l</h2> </td> </tr> </table> </td> </tr> <tr> <td bgcolor="#ffffff" align="center"> <table width="650px" cellspacing="0" cellpadding="3" class="container"> <tr> <td colspan="5"> <hr> </td> </tr> <tr> <td colspan="5" style="text-align:center;"> <a href="#" alt="" title=""><img src="images/twitter.jpg" alt="" title="" /></a> <a href="#" alt="" title=""><img src="images/facebook.jpg" alt="" title="" /></a> <a href="#" alt="" title=""><img src="images/googleplus.jpg" alt="" title="" /></a> <a href="#" alt="" title=""><img src="images/linkedin.jpg" alt="" title="" /></a> </td> </tr> <tr style="text-align:center;"> <td colspan="6" style="font-size: 12px;" class="greytext"> <p>copyright © 2000-2015 domains ltd. rights reserved.</p> </td> </tr> <tr style="text-align:center; font-size: 12px;" class="copyright"> <td class="bold column"><a href="#" alt="" title="">terms & conditions</a></td> <td class="bold"><a href="#" alt="" title="">privacy</a></td> <td class="bold"><a href="#" alt="" title="">cookies</a></td> <td class="bold"><a href="#" alt="" title="">accessibility</a></td> <td class="bold"><a href="#" alt="" title="">sitemap</a></td> </tr> </table> </td> </tr> </table> css
body { font-family: lucida grande,lucida sans unicode,lucida sans,geneva,verdana,sans-serif; } td { } .alignright { text-align: right; } .navbarbg { background-color: #283791; color: #ffffff; height: 75px; } hr { } h1,h2,h3,h4,h5,h6 { font-family: arial bold,gadget,sans-serif; margin: 0; } { color: #283790; } .whitetext { color: #ffffff; } .bluetext { color: #283790; } .greytext { color: #9f9f9f; } .smalltext { font-size: 14px; } .bodytext { font-size: 13px; padding-top: 20px; } .lucidafont { font-family: lucida grande,lucida sans unicode,lucida sans,geneva,verdana,sans-serif; } .toppadding { padding-top: 20px; padding-bottom: 10px; } .bold { font-weight: bold; } /* .copyright td { border-right: 1px solid #000; height: 5px; } .copyright td:last-child { border-right: none; } */ @media screen , (max-width:480px) { table { width: 100%!important; } } @media screen , (max-width: 480px) { table[class="body_table"] { width: 440px!important; } table td[class="column"] { width:100%!important; display: block!important; } }
1st thing need make html , body 100% takes whole browser / view-port width
then, child element on setting 100% take parents width, html / body in case
problem in markup set width=100% table, table tries take 100% of parent(html/body in case), and, wide content on page, whole width not occupied.
update markup below :
html,body { font-family: lucida grande, lucida sans unicode, lucida sans, geneva, verdana, sans-serif; width:100%; margin:0; padding:0; } table{ width:100%; } on general note, take below markup , understand comment
<div class="div_1">div 1 <div class="div_2">div 2</div> </div> <div class="div_3">div 3</div> css
.div_1 { width:100%; /*of html/body if width set, else content width*/ border:1px solid red; } .div_2 { width:50%; /*50% of div_1 width*/ border:1px solid green; } .div_3 { width:70%; /*50% of html / body width - notice markup*/ border:1px solid blue; } 
Comments
Post a Comment