Chase
Reputation: 27
Can't get table to be responsive
Newbie here again. I have this email and I like the way everything looks, but I have two questions I'm hoping someone can answer.
First - when I open this page in Google Chrome and adjust the width of the window, nothing changes. It doesn't seem responsive at all. So I must be missing something in my code. I know this seems really generic of a problem, but I could use some help. I want the 600px wide table to be that width until the window or device is under 600px wide, at which point I want the 600px wide table to be fluid.
Second - In the case of either A or B images, I'm noticing that it doesn't seem vertically centered. I had originally wanted it at the top of the container that's holding it, but now I'd like it vertically centered with equal space on top and bottom. Whether it's the text next to it or the image, what would be the proper way to do that? I've tried vertical-align and can't seem to get it to work.
EDIT: If it helps, I'm going off the teachings I am reading in "The Better Email on Design" by Jason Rodriguez.
Again, I appreciate your wisdom!
https://codepen.io/chaser87/pen/ExPNRNN
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Lorem ipsum dolor</title>
<style type="text/css">
/* CLIENT-SPECIFIC STYLES */
body, table, td, a { -webkit-text-size-adjust: 100%; -ms-textsize-adjust: 100%; }
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
img { -ms-interpolation-mode: bicubic; }
/* RESET STYLES */
img { border: 0; height: auto; line-height: 100%; outline: none;
text-decoration: none; }
table { border-collapse: collapse !important; }
body { height: 100% !important; margin: 0 !important; padding: 0
!important; width: 100% !important; }
@media screen and (max-width: 600px) {
.fluid-table {width: 100% !important;}
}
</style>
</head>
<body style="margin: 0 !important; padding: 0 !important;">
<!--PREVIEW TEXT-->
<div style="display: none; max-height: 0; overflow: hidden;">
Lorem ipsum dolor ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌
</div>
<!--END OF PREVIEW TEXT-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" style="background-color: #FFFFFF;">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="600px" role="presentation" class="fluid-table">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td><img src="https://dummyimage.com/1200x600/000/fff" width="600px"></td>
</tr>
<tr>
<td style="padding: 10px 7px 10px 7px; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 15px; line-height: 22px;">
<p>Lorem ipsum dolor sit amet, no quis omnium consequuntur vel, an nec tempor lobortis dissentiunt, cum ex deseruisse reprimique. Vix nostrum consulatu omittantur id, eum et voluptaria posidonium. Te prima prodesset vim. Dictas voluptua adversarium vel ex.Lorem ipsum dolor sit amet, no quis omnium consequuntur vel, an nec tempo. <br>
</p>
</td>
</tr>
<!--FIRST ROW WITH PIC-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" style="background-color: #E3E3E3">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="600" role="presentation">
<!--TWO COLUMN SECTION-->
<tr>
<td align="center" valign="top">
<!--TWO COLUMNS-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td>
<!--LEFT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="39%" align="left" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td style="margin-top: auto; margin-bottom: auto; padding: 25px 0px 25px 10px">
<!--CONTENT--> <img st src="https://dummyimage.com/450x450/000/fff&text=A" width="225">
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--RIGHT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="59%" align="right" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="left" style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 15px; line-height: 22px; margin-top: auto; margin-bottom: auto; padding: 25px 10px 25px 5px">
<!--CONTENT-->
<span><h3 style="margin-top: auto; margin-bottom: auto;">Lorem ipsum dolor</h3>
</span>
<p>
Lorem ipsum dolor sit amet, no quis omnium consequuntur vel, an nec tempor lobortis dissentiunt, cum ex deseruisse reprimique. Vix nostrum consulatu omittantur id, eum et voluptaria posidonium. Te prima prodesset vim. Dictas voluptua adversarium vel ex.Lorem ipsum dolor sit amet, no quis omnium consequuntur vel, an nec tempor lobortis dissentiunt, cum ex deseruisse</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--END OF 2 COLUMN SECTION-->
</table>
</td>
</tr>
</table>
<!--SECOND ROW WITH PIC-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="600" role="presentation">
<!--TWO COLUMN SECTION-->
<tr>
<td align="center" style="vertical-align: top;">
<!--TWO COLUMNS-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" align=>
<tr>
<td>
<!--LEFT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="59%" align="left" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="left" style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 15px; line-height: 22px; padding: 25px 5px 20px 10px">
<!--CONTENT-->
<span><h3 style="margin-top: 0; margin-bottom: 0;">Lorem ipsum dolor</h3>
</span><p>
Lorem ipsum dolor sit amet, no quis omnium consequuntur vel, an nec tempor lobortis dissentiunt, cum ex deseruisse reprimique. Vix nostrum consulatu omittantur id, eum et voluptaria posidonium. Te prima prodesset vim. Dictas voluptua adversarium vel ex. Lorem ipsum dolor sit amet, no quis omnium consequuntur vel, an nec tempor lobortis dissentiunt, cum ex deseruisse reprimique.<strong> </strong></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--RIGHT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="39%" align="right" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<!--CONTENT-->
<td style="padding: 25px 10px 20px 0px"><img src="https://dummyimage.com/450x450/000/fff&text=B" width="225">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--END OF 2 COLUMN SECTION-->
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" style="background-color: #E3E3E3">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="600" role="presentation">
<!--CONTENT-->
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center" style="padding: 0px 0px 10px 0px; vertical-align: top;"><h2 style="font-size: 25px; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; margin-top: 0; margin-bottom: 0; padding: 15px 0px 15px 0px">More Useful Links</h2>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--BOTTOM ROW LINK STORIES-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" style="background-color: #E3E3E3">
<tr>
<td align="center" style="margin-bottom: 0; margin-top: 0;">
<table border="0" cellpadding="0" cellspacing="0" width="600" role="presentation">
<!--THREE COLUMN SECTION-->
<tr>
<td align="center" style="vertical-align: top;">
<!--THREE COLUMNS-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td style="padding: 0px 0px 0px 0px;">
<!--LEFT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="33%" align="left" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center" style="padding: 0px 0px 15px 15px;">
<!--CONTENT-->
<img src="https://dummyimage.com/400x400/000/fff&text=C" width="150"><span style="text-align: center; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; padding: 0px 0px 0px 0px"><h4>
LEARN MORE ABOUT OUR SCHOLARSHIPS </h4>
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--MIDDLE COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="33%" align="left" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center" style="padding: 0px 0px 15px 0px">
<!--CONTENT--> <img src="https://dummyimage.com/400x400/000/fff&text=D" width="150">
<span style="text-align: center; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'"><h4> KNOW A<br>
FUTURE STUDENT? </h4>
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--RIGHT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="33%" align="right" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center" style="padding: 0px 15px 5px 0px">
<!--CONTENT--> <img src="https://dummyimage.com/400x400/000/fff&text=E" width="150">
<span style="text-align: center; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'"><h4> LEARN MORE<br>
ABOUT US </h4>
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--END OF 3 COLUMN SECTION-->
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" style="background-color: #171717">
<tr>
<td align="center" style="padding: 0px 0px 15px 0px;">
<table border="0" cellpadding="0" cellspacing="0" width="600" role="presentation">
<!--FOOTER SECTION-->
<tr>
<td align="center" style="vertical-align: top;">
<!--FOOTER-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center" style="padding: 15px 0px 5px 0px;">
<h4 style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; color: white; margin-top: 0px; margin-bottom: 0px;">Follow Generic State University on social media!</h4>
<br><img width="45px" src="https://dummyimage.com/150x150/000/fff&text=Logo1"> <img width="45" src="https://dummyimage.com/150x150/000/fff&text=Logo1"> <img width="45" src="https://dummyimage.com/150x150/000/fff&text=Logo1"> <img width="45" src="https://dummyimage.com/150x150/000/fff&text=Logo1">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Upvotes: 1
Views: 69
Answers (3)
Humble Cucumber
Reputation: 450
On line 23 @media screen and (max-width: 600px) the width was adjusted for all elements with the class "fluid-table" but not the proper ones where using that class. I just modified that. Hope it helps!
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Lorem ipsum dolor</title>
<style type="text/css">
/* CLIENT-SPECIFIC STYLES */
body, table, td, a { -webkit-text-size-adjust: 100%; -ms-textsize-adjust: 100%; }
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
img { -ms-interpolation-mode: bicubic; }
/* RESET STYLES */
img { border: 0; height: auto; line-height: 100%; outline: none;
text-decoration: none; }
table { border-collapse: collapse !important; }
body { height: 100% !important; margin: 0 !important; padding: 0
!important; width: 100% !important; }
@media screen and (max-width: 600px) {
.fluid-table {
width: 100% !important;
}
table {
width: 100% !important;
}
}
</style>
</head>
<body style="margin: 0 !important; padding: 0 !important;">
<!--PREVIEW TEXT-->
<div style="display: none; max-height: 0; overflow: hidden;">
Lorem ipsum dolor ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌
</div>
<!--END OF PREVIEW TEXT-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" style="background-color: #FFFFFF;">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="600px" class="fluid-table" role="presentation" class="fluid-table">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td><img src="https://dummyimage.com/1200x600/000/fff" width="600px" class="fluid-table"></td>
</tr>
<tr>
<td style="padding: 10px 7px 10px 7px; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 15px; line-height: 22px;">
<p>Lorem ipsum dolor sit amet, no quis omnium consequuntur vel, an nec tempor lobortis dissentiunt, cum ex deseruisse reprimique. Vix nostrum consulatu omittantur id, eum et voluptaria posidonium. Te prima prodesset vim. Dictas voluptua adversarium vel ex.Lorem ipsum dolor sit amet, no quis omnium consequuntur vel, an nec tempo. <br>
</p>
</td>
</tr>
<!--FIRST ROW WITH PIC-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" style="background-color: #E3E3E3">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="600" role="presentation">
<!--TWO COLUMN SECTION-->
<tr>
<td align="center" valign="top">
<!--TWO COLUMNS-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td>
<!--LEFT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="39%" align="left" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td style="margin-top: auto; margin-bottom: auto; padding: 25px 0px 25px 10px">
<!--CONTENT--> <img st src="https://dummyimage.com/450x450/000/fff&text=A" width="225">
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--RIGHT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="59%" align="right" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="left" style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 15px; line-height: 22px; margin-top: auto; margin-bottom: auto; padding: 25px 10px 25px 5px">
<!--CONTENT-->
<span><h3 style="margin-top: auto; margin-bottom: auto;">Lorem ipsum dolor</h3>
</span>
<p>
Lorem ipsum dolor sit amet, no quis omnium consequuntur vel, an nec tempor lobortis dissentiunt, cum ex deseruisse reprimique. Vix nostrum consulatu omittantur id, eum et voluptaria posidonium. Te prima prodesset vim. Dictas voluptua adversarium vel ex.Lorem ipsum dolor sit amet, no quis omnium consequuntur vel, an nec tempor lobortis dissentiunt, cum ex deseruisse</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--END OF 2 COLUMN SECTION-->
</table>
</td>
</tr>
</table>
<!--SECOND ROW WITH PIC-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="600" role="presentation">
<!--TWO COLUMN SECTION-->
<tr>
<td align="center" style="vertical-align: top;">
<!--TWO COLUMNS-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" align=>
<tr>
<td>
<!--LEFT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="59%" align="left" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="left" style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 15px; line-height: 22px; padding: 25px 5px 20px 10px">
<!--CONTENT-->
<span><h3 style="margin-top: 0; margin-bottom: 0;">Lorem ipsum dolor</h3>
</span><p>
Lorem ipsum dolor sit amet, no quis omnium consequuntur vel, an nec tempor lobortis dissentiunt, cum ex deseruisse reprimique. Vix nostrum consulatu omittantur id, eum et voluptaria posidonium. Te prima prodesset vim. Dictas voluptua adversarium vel ex. Lorem ipsum dolor sit amet, no quis omnium consequuntur vel, an nec tempor lobortis dissentiunt, cum ex deseruisse reprimique.<strong> </strong></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--RIGHT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="39%" align="right" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<!--CONTENT-->
<td style="padding: 25px 10px 20px 0px"><img src="https://dummyimage.com/450x450/000/fff&text=B" width="225">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--END OF 2 COLUMN SECTION-->
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" style="background-color: #E3E3E3">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="600" role="presentation">
<!--CONTENT-->
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center" style="padding: 0px 0px 10px 0px; vertical-align: top;"><h2 style="font-size: 25px; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; margin-top: 0; margin-bottom: 0; padding: 15px 0px 15px 0px">More Useful Links</h2>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--BOTTOM ROW LINK STORIES-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" style="background-color: #E3E3E3">
<tr>
<td align="center" style="margin-bottom: 0; margin-top: 0;">
<table border="0" cellpadding="0" cellspacing="0" width="600" role="presentation">
<!--THREE COLUMN SECTION-->
<tr>
<td align="center" style="vertical-align: top;">
<!--THREE COLUMNS-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td style="padding: 0px 0px 0px 0px;">
<!--LEFT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="33%" align="left" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center" style="padding: 0px 0px 15px 15px;">
<!--CONTENT-->
<img src="https://dummyimage.com/400x400/000/fff&text=C" width="150"><span style="text-align: center; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; padding: 0px 0px 0px 0px"><h4>
LEARN MORE ABOUT OUR SCHOLARSHIPS </h4>
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--MIDDLE COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="33%" align="left" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center" style="padding: 0px 0px 15px 0px">
<!--CONTENT--> <img src="https://dummyimage.com/400x400/000/fff&text=D" width="150">
<span style="text-align: center; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'"><h4> KNOW A<br>
FUTURE STUDENT? </h4>
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--RIGHT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="33%" align="right" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center" style="padding: 0px 15px 5px 0px">
<!--CONTENT--> <img src="https://dummyimage.com/400x400/000/fff&text=E" width="150">
<span style="text-align: center; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'"><h4> LEARN MORE<br>
ABOUT US </h4>
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--END OF 3 COLUMN SECTION-->
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" style="background-color: #171717">
<tr>
<td align="center" style="padding: 0px 0px 15px 0px;">
<table border="0" cellpadding="0" cellspacing="0" width="600" role="presentation">
<!--FOOTER SECTION-->
<tr>
<td align="center" style="vertical-align: top;">
<!--FOOTER-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center" style="padding: 15px 0px 5px 0px;">
<h4 style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; color: white; margin-top: 0px; margin-bottom: 0px;">Follow Generic State University on social media!</h4>
<br><img width="45px" src="https://dummyimage.com/150x150/000/fff&text=Logo1"> <img width="45" src="https://dummyimage.com/150x150/000/fff&text=Logo1"> <img width="45" src="https://dummyimage.com/150x150/000/fff&text=Logo1"> <img width="45" src="https://dummyimage.com/150x150/000/fff&text=Logo1">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>Upvotes: 1
Humble Cucumber
Reputation: 450
Edit below
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Lorem ipsum dolor</title>
<style type="text/css">
/* CLIENT-SPECIFIC STYLES */
body, table, td, a { -webkit-text-size-adjust: 100%; -ms-textsize-adjust: 100%; }
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
img { -ms-interpolation-mode: bicubic; }
/* RESET STYLES */
img { border: 0; height: auto; line-height: 100%; outline: none;
text-decoration: none; }
table { border-collapse: collapse !important; }
body { height: 100% !important; margin: 0 !important; padding: 0
!important; width: 100% !important; }
@media screen and (max-width: 600px) {
.fluid-table {
width: 100% !important;
}
table {
width: 100% !important;
}
}
</style>
</head>
<body style="margin: 0 !important; padding: 0 !important;">
<!--PREVIEW TEXT-->
<div style="display: none; max-height: 0; overflow: hidden;">
Lorem ipsum dolor ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌
</div>
<!--END OF PREVIEW TEXT-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" style="background-color: #FFFFFF;">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="600px" class="fluid-table" role="presentation" class="fluid-table">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td><img src="https://dummyimage.com/1200x600/000/fff" width="600px" class="fluid-table"></td>
</tr>
<tr>
<td style="padding: 10px 7px 10px 7px; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 15px; line-height: 22px;">
<p>Lorem ipsum dolor sit amet, no quis omnium consequuntur vel, an nec tempor lobortis dissentiunt, cum ex deseruisse reprimique. Vix nostrum consulatu omittantur id, eum et voluptaria posidonium. Te prima prodesset vim. Dictas voluptua adversarium vel ex.Lorem ipsum dolor sit amet, no quis omnium consequuntur vel, an nec tempo. <br>
</p>
</td>
</tr>
<!--FIRST ROW WITH PIC-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" style="background-color: #E3E3E3">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="600" role="presentation">
<!--TWO COLUMN SECTION-->
<tr>
<td align="center" valign="top">
<!--TWO COLUMNS-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td>
<!--LEFT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="39%" align="left" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td style="margin-top: auto; margin-bottom: auto; padding: 25px 0px 25px 10px">
<!--CONTENT--> <img st src="https://dummyimage.com/450x450/000/fff&text=A" width="225">
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--RIGHT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="59%" align="right" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="left" style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 15px; line-height: 22px; margin-top: auto; margin-bottom: auto; padding: 25px 10px 25px 5px">
<!--CONTENT-->
<span><h3 style="margin-top: auto; margin-bottom: auto;">Lorem ipsum dolor</h3>
</span>
<p>
Lorem ipsum dolor sit amet, no quis omnium consequuntur vel, an nec tempor lobortis dissentiunt, cum ex deseruisse reprimique. Vix nostrum consulatu omittantur id, eum et voluptaria posidonium. Te prima prodesset vim. Dictas voluptua adversarium vel ex.Lorem ipsum dolor sit amet, no quis omnium consequuntur vel, an nec tempor lobortis dissentiunt, cum ex deseruisse</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--END OF 2 COLUMN SECTION-->
</table>
</td>
</tr>
</table>
<!--SECOND ROW WITH PIC-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="600" role="presentation">
<!--TWO COLUMN SECTION-->
<tr>
<td align="center" style="vertical-align: top;">
<!--TWO COLUMNS-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" align=>
<tr>
<td>
<!--LEFT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="59%" align="left" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="left" style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; font-size: 15px; line-height: 22px; padding: 25px 5px 20px 10px">
<!--CONTENT-->
<span><h3 style="margin-top: 0; margin-bottom: 0;">Lorem ipsum dolor</h3>
</span><p>
Lorem ipsum dolor sit amet, no quis omnium consequuntur vel, an nec tempor lobortis dissentiunt, cum ex deseruisse reprimique. Vix nostrum consulatu omittantur id, eum et voluptaria posidonium. Te prima prodesset vim. Dictas voluptua adversarium vel ex. Lorem ipsum dolor sit amet, no quis omnium consequuntur vel, an nec tempor lobortis dissentiunt, cum ex deseruisse reprimique.<strong> </strong></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--RIGHT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="39%" align="right" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<!--CONTENT-->
<td style="padding: 25px 10px 20px 0px"><img src="https://dummyimage.com/450x450/000/fff&text=B" width="225">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--END OF 2 COLUMN SECTION-->
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" style="background-color: #E3E3E3">
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="600" role="presentation">
<!--CONTENT-->
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center" style="padding: 0px 0px 10px 0px; vertical-align: top;"><h2 style="font-size: 25px; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; margin-top: 0; margin-bottom: 0; padding: 15px 0px 15px 0px">More Useful Links</h2>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--BOTTOM ROW LINK STORIES-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" style="background-color: #E3E3E3">
<tr>
<td align="center" style="margin-bottom: 0; margin-top: 0;">
<table border="0" cellpadding="0" cellspacing="0" width="600" role="presentation">
<!--THREE COLUMN SECTION-->
<tr>
<td align="center" style="vertical-align: top;">
<!--THREE COLUMNS-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td style="padding: 0px 0px 0px 0px;">
<!--LEFT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="33%" align="left" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center" style="padding: 0px 0px 15px 15px;">
<!--CONTENT-->
<img src="https://dummyimage.com/400x400/000/fff&text=C" width="150"><span style="text-align: center; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; padding: 0px 0px 0px 0px"><h4>
LEARN MORE ABOUT OUR SCHOLARSHIPS </h4>
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--MIDDLE COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="33%" align="left" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center" style="padding: 0px 0px 15px 0px">
<!--CONTENT--> <img src="https://dummyimage.com/400x400/000/fff&text=D" width="150">
<span style="text-align: center; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'"><h4> KNOW A<br>
FUTURE STUDENT? </h4>
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--RIGHT COLUMN-->
<table border="0" cellpadding="0" cellspacing="0" width="33%" align="right" role="presentation">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center" style="padding: 0px 15px 5px 0px">
<!--CONTENT--> <img src="https://dummyimage.com/400x400/000/fff&text=E" width="150">
<span style="text-align: center; font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'"><h4> LEARN MORE<br>
ABOUT US </h4>
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!--END OF 3 COLUMN SECTION-->
</table>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation" style="background-color: #171717">
<tr>
<td align="center" style="padding: 0px 0px 15px 0px;">
<table border="0" cellpadding="0" cellspacing="0" width="600" role="presentation">
<!--FOOTER SECTION-->
<tr>
<td align="center" style="vertical-align: top;">
<!--FOOTER-->
<table border="0" cellpadding="0" cellspacing="0" width="100%" role="presentation">
<tr>
<td align="center" style="padding: 15px 0px 5px 0px;">
<h4 style="font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'; color: white; margin-top: 0px; margin-bottom: 0px;">Follow Generic State University on social media!</h4>
<br><img width="45px" src="https://dummyimage.com/150x150/000/fff&text=Logo1"> <img width="45" src="https://dummyimage.com/150x150/000/fff&text=Logo1"> <img width="45" src="https://dummyimage.com/150x150/000/fff&text=Logo1"> <img width="45" src="https://dummyimage.com/150x150/000/fff&text=Logo1">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>Sorry didn't read your question properly. Hope it helps! Good luck!
Upvotes: 0
uamanager
Reputation: 1248
You're using width="600px" on your table with styles for 100% width.
So it's not changing width of table because of this width="600px" restriction.
Upvotes: 1
Related Questions
- How to make media Queries work css3
- Why doesn't my media screen query work, I can't make my website responsive?
- I can't seem to get my media query to work for responsive site
- Make My Table Responsive
- Media query responsive table design not responding to mobile
- How do I make this table responsive?
- How to make my table responsive , without media queries?
- responsive media query not working
- CSS media query not applying
- Responsive media queries not working in css