TS0
<td> Won't Stack Below on iOS
Hi there!
HOW DO I MAKE MY CODE LOOK NICE IN HERE?!
So I've been driving myself crazy on how to figure this out but I have no more ideas. Basically I have a social media and subscription footer, on a screen smaller than 600px the subscription part should be below the social media icons.
This does work on firefox when I shrink the screen, however on iOS for some reason this is not working, I have tried a few changes but no combination I've tried seems to do the job. Here's my code:
> <html xmlns="http://www.w3.org/1999/xhtml">
> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
> <head>
> <title>New York State</title>
>
> <style type="text/css">
>
> img {
> margin-left: 20px;
> }
> body {
> font: 100%/1.4 Arial, Helvetica, sans-serif;
> background-color: #FFFFFF;
> margin: 0;
> padding: 0;
> color: #000;
> font-size: 16px !important;
> }
> h1 {
> color: #004586;
> font-weight: bolder;
> font-size: 17px;
> }
> h2 {
> color: #004586;
> font-weight: bolder;
> font-size: 15px;
> }
> span {
> color: white;
> font-size: 16px;
> font-weight: bold;
> line-height: 144.5%;
> font: 100%/1.4 Arial, Helvetica, sans-serif;
> }
> ul, li {
> color: #004586;
> }
> ul {
> margin-left:-25px;
> }
> .container {
> width: 600px;
> background-color: #FFFFFF;
> border-collapse: collapse;
> }
> a img {
> border: none;
> }
> a:link {
> color: #FFFFFF;
> text-decoration: none;
> }
> a:visited {
> color: #FFFFFF;
> text-decoration: none;
> }
> a:hover {
> color: #FFFFFF;
> text-decoration: none;
> }
> a:active {
> color: #FFFFFF;
> text-decoration: none;
> }
> .header {
> width: 100%;
> background-color: #FFFFFF;
> margin-top: 30px;
> margin-right: auto;
> margin-bottom: 15px;
> margin-left: auto;
> }
> .textarea {
> width: 100%;
> background-color: #FFFFFF;
> margin-bottom: 12px;
> margin-right: auto;
> margin-left: auto;
> }
> .footer {
> width: 100%;
> background-color: #FFFFFF;
> padding-top: 10px;
> padding-bottom: 10px;
> margin: 0 auto;
> }
> @media only screen and (max-width: 600px) {
> table[class="container"] {
> width: 100% !important;
> }
> .header {
> width: 100% !important;
> }
> .container {
> width: 100% !important;
> }
> .textAreaT {
> max-width: 100% !important;
> width: 100% !important;
> }
> tr td{
> display:block !important;
> margin-left:auto;
> margin-right: auto;
> }
> .centerTd {
> width: 245px !important;
> margin-left: auto !important;
> margin-right: auto !important;
> float:none !important
> }
> .rightImg {
> margin-left:0 !important;
> }
> .leftText {
> width:93% !important;
> margin-top:0 !important;
> }
> .rightText
> {
> margin-left:10px !important;
> }
> table {
> margin-left: auto !important;
> margin-right: auto !important;
> }
> img {
> margin-left: 40px !important;
> margin-top:10px;
> }
> #facebook {
> margin-left:30% !important;
> }
> .250pxT {
> width:250px !important;
> }
> .165pxT {
> width:250px !important;
> }
> .textWidth {
> width:550px !important;
> }
> span {
> margin-left:23%;
> }
> .textTable {
> margin: 10px !important;
> width: 590px !important;
> }
> .bannerImg {
> height: 160px !important;
> margin-left: 60px !important;
> width: 400px !important;
> }
> }
> </style>
> </head>
> <body>
> <table align="center" class="container" style="margin-left: auto; margin-right: auto; width: 100%;">
> <tbody>
> <tr style="background-color: #EBEBEB; width: 900px; height: 145px;">
> <td class="" style="background-color:#EBEBEB">
> <table width="600" align="center" class="">
> <tbody>
> <tr>
> <td class="" style="background-color:#EBEBEB">
> <img width="350" height="131" class="bannerImg" src="http://img04.en25.com/EloquaImages/clients/NYSExecChamber/%7B77358d63-6463-4a04-a7f7-7ab35cf60349%7D_NYS_FULL_COLOR_GOVERNORS_LOCK_UP_CMYK.png" style="width: 350px; margin-left: 0;">
> </td>
> </tr>
> </tbody>
> </table>
> </td>
> </tr>
> <tr>
> <td class="">
> <table width="600" align="center" class="textTable">
> <tbody>
> <tr>
> <td style="font-size: 16px; font-family: arial,arial,sans-serif;border-style: none;" class="">
> Dear <span class="eloquaemail">FirstName</span>,<br><br>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.<br>
> <br>
>
> Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. <br><br>Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh.<br> <br>
>
> Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget,
> imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris.<br><br>Sincerely,<br><br><img class="" src="http://img04.en25.com/EloquaImages/clients/NYSExecChamber/%7ba711b490-6024-4ce3-8c7a-8c1b5d97df7d%7d_signature_%28002%29.jpg"><br>Governor Andrew M. Cuomo<br><br>
> </td>
> </tr>
> </tbody>
> </table>
> </td>
> </tr>
> <tr style="background-color: #2377B9; width: 900px; height: 69px;">
> <td class="" style="background-color:#2377B9">
> <table width="600" align="center">
> <tbody>
> <tr>
> <!--[if !mso]><!-- -->
> <td class="" style="background-color:#2377B9;">
> <a href="https://www.facebook.com/GovernorAndrewCuomo/?elqTrack=true&elqTrackId=3D38746A33CA48B2B7287C27B15252F4&elqaid=<span class=eloquaemail>elqassetId</span>&elqat=<span class=eloquaemail>elqassetType</span>" data-targettype="webpage"><img class="" id="facebook" src="http://img04.en25.com/EloquaImages/clients/NYSExecChamber/%7Bf6e47e7b-33af-4dcd-88f2-62bb4a4dee0c%7D_facebook.png"></a>
> <a href="https://twitter.com/NYGov?elqTrack=true&elqTrackId=A804F20D11C381AA56BE5516CBFE859E&elqaid=<span class=eloquaemail>elqassetId</span>&elqat=<span class=eloquaemail>elqassetType</span>" data-targettype="webpage" title="Twitter"><img class="" id="twitter" src="http://img04.en25.com/EloquaImages/clients/NYSExecChamber/%7B7bf439f9-cc4f-40e0-af11-8d06a107b758%7D_twitter.png"></a>
> <a href="https://instagram.com/nygovcuomo?elqTrack=true&elqTrackId=1950C1E3AA7C23B6EE3CD81FA5A9E553&elqaid=<span class=eloquaemail>elqassetId</span>&elqat=<span class=eloquaemail>elqassetType</span>" data-targettype="webpage" title="Instagram"><img id="instagram" src="http://img04.en25.com/EloquaImages/clients/NYSExecChamber/%7B0145d5bf-2545-40e3-a9bf-692046fb1037%7D_instagram.png" class=""></a><br />
> </td>
> <!--<![endif]-->
> <!--[if gte mso]>
> <td style="background-color:#2377B9">
> <a href="https://www.facebook.com/GovernorAndrewCuomo/" ><img src="http://img04.en25.com/EloquaImages/clients/NYSExecChamber/{f6e47e7b-33af-4dcd-88f2-62bb4a4dee0c}_facebook.png" /></a>
> </td>
> <td style="background-color:#2377B9">
> <a href="https://twitter.com/NYGov" ><img src="http://img04.en25.com/EloquaImages/clients/NYSExecChamber/{7bf439f9-cc4f-40e0-af11-8d06a107b758}_twitter.png"/></a>
> </td>
> <td style="background-color:#2377B9; margin-right:50px">
> <a href="https://instagram.com/nygovcuomo" ><img src="http://img04.en25.com/EloquaImages/clients/NYSExecChamber/{0145d5bf-2545-40e3-a9bf-692046fb1037}_instagram.png" /></a>
> </td>
> <![endif]-->
> <td class="" style="margin-bottom:10px;">
> <span><a style="color:#FFF" title="Unsubscribe" data-targettype="sysaction" href="http://s1680389219.t.en25.com/e/u?s=<eloqua type='emailfield' syntax='siteid'/>&elq=<eloqua type='emailfield' syntax='recipientid'/>">Unsubscribe</a> <span style="color:orange; margin:0 !important">|</span> <a style="color:#FFF" title="Subscribe" data-targettype="sysaction" href="http://s1680389219.t.en25.com/e/sl?s=<eloqua type='emailfield' syntax='siteid'/>&elq=<eloqua type='emailfield' syntax='recipientid'/>">Subscribe</a> <span style="color:orange; margin:0 !important">|</span>
> <a style="color:#FFF" title="Privacy Policy" data-targettype="webpage" href="https://www.ny.gov/privacy-policy?elqTrack=true&elqTrackId=35720FD888451CFF4D4B07342A36E209&elqaid=<span class=eloquaemail>elqassetId</span>&elqat=<span class=eloquaemail>elqassetType</span>">Privacy Policy</a></span>
> </td>
> </tr>
> </tbody>
> </table>
> </td>
> </tr>
> </tbody>
> </table>
>
> </body></html>
Has someone seen something like this? Any suggestions? Below is the link to the litmus last litmus test I ran in case it is useful:
https://litmus.com/pub/4b31908
Thanks in advance for any help I receive.
Rather than just using <td>s for the two areas (icons and links), you want to use two full tables to hold those, and then add the classes so the responsive styles you're using will resize the tables so everything stacks correctly. So starting at your blue row:
tr
td
table class=250pxT
tbody
tr
td
table (align left, class=250pxT, holds your icons, includes tr/td)
table (align right, class=250pxT, holds your links, includes tr/td)
/td
/tr
/tbody
/table
This is going to break some of the other parts of your email - you'll need to use some of the classes defined in your styles to adjust the width of the other tables.
I think the issue you are having is more related to the section above the footer. You have a hardcoded width of 600 in the table. This will stop the table from scaling on mobile. Try 100% in the table and a width of 600 in the td that wraps the copy.