Building responsive 2-to-1 column layouts ----outlook 2013 problem

AS described in this method http://www.campaignmonitor.com/guides/mobile/responsive/

It works except in outlook 2013,,,,two tables are aligned one after another insted side by side,,,,,plz anyone have solution to it

roshodgekiss roshodgekiss, 1 year ago

Hey there crazy1395, it's hard to say exactly what's going on exactly without taking a look at your code. However, off the bat I suspect that Outlook 2013 is introducing gaps, which is causing the tables to wrap underneath each other, even though the widths equal the surrounding container. This phenomenon has been described in this post and in this forum thread. It's happened to me, too!

I recommend taking a look at these resources for a fix, then posting your code here if you're still short on answers. Thanks, crazy - let us know how you go :)


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
crazy1395, 1 year ago

Hi! thanks Rosanne ,you are right its the space/gap tht is causing problem...below is my code and results without media queries,how it looks in outlook 2013 and other clients......but still i have nt found any solution

You can see red line 1px space,,,it works if i reduce 1px width of table cell

https://docs.google.com/file/d/0B9CW6-IhujZZeXI4MmxHTG52RVE/edit?usp=sharing


                        <table cellpadding="0" cellspacing="0" border="0" align="center" style="border-collapse: collapse;mso-table-lspace:0pt; mso-table-rspace:0pt;">
                            <tr>
                                <td width="507" style="border-collapse: collapse;line-height:1px;font-size: 1px;">
                                    <table bgcolor="black" align="left" cellpadding="0" cellspacing="0" border="0"   style="border-collapse: collapse;mso-table-lspace:0pt; mso-table-rspace:0pt;">
                                        <tr>
                                            <td bgcolor="red" width="110" align="left"  valign="top" style="border-collapse: collapse;"><img style="display:block;border:none;" src="images/110x110_01img.gif" alt="" width="110" height="110" /></td>
                                            <td bgcolor="yellow" width="30" ></td><!--if reduced by 1px that is 29 then works-->
                                        </tr>    
                                    </table>
                                    <table bgcolor="black" cellpadding="0" cellspacing="0" border="0"   style="border-collapse: collapse;mso-table-lspace:0pt; mso-table-rspace:0pt;">
                                        <tr>
                                            <td bgcolor="lightgreen" class="LIRTtitle" align="left" valign="top" style="border-collapse: collapse;">
                                                <div class="h2">Expand your buisness promotion</div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td bgcolor="lightgreen" width="367" class="LIRTtext" align="left" valign="top" style="padding-top:10px;padding-bottom:15px;border-collapse: collapse;"> 
                                                Nunc pellentesque commodo velit non facilisis. Sed euismod vestibulum ante vel <a href="#">tempor</a>. Vivamus.
                                            </td>
                                        </tr>
                                        <tr>
                                            <td bgcolor="lightgreen" align="left" style="border-collapse: collapse;"><a href="#"><img class="image_fix" src="images/button.gif" alt="Read more" /></a></td>
                                        </tr>        
                                    </table>
                                </td>
                            </tr>
                        </table
BThies BThies, 1 year ago

Just use this in the <HEAD>:

<style type="text/css">
    /* Mobile-specific Styles */
    @media only screen and (min-device-width: 1px) and (max-device-width: 569px), only screen and (min-device-width: 570px) and (max-device-width: 720px) and (orientation:portrait) {
        table[class=w320], td[class=w320] { width:320px !important; }
        td[class=float320] { clear:both !important; float:left !important; width:320px !important; }
    }
</style>

and then adjust your code to use <TD> cells for stacking rather than tables like this:

<table cellpadding="0" cellspacing="0" border="0" align="center" style="border-collapse: collapse;mso-table-lspace:0pt; mso-table-rspace:0pt;">
    <tr>
        <td width="130" style="border-collapse: collapse;line-height:1px;font-size:1px;" class="float320" align="left">
            <table bgcolor="black" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;mso-table-lspace:0pt; mso-table-rspace:0pt;">
                <tr>
                    <td bgcolor="red" width="110" align="left"  valign="top" style="border-collapse: collapse;"><img style="display:block;border:none;" src="images/110x110_01img.gif" alt="" width="110" height="110" /></td>
                    <td bgcolor="yellow" width="30" ></td><!--if reduced by 1px that is 29 then works-->
                </tr>   
            </table>
        </td>
        <td width="377" style="border-collapse: collapse;line-height:1px;font-size:1px;" class="float320" bgcolor="lightgreen" align="left"> 
            <table bgcolor="black" cellpadding="0" cellspacing="0" border="0" style="border-collapse: collapse;mso-table-lspace:0pt; mso-table-rspace:0pt;">
                <tr>
                    <td id="LIRTtitle" align="left" valign="top" style="border-collapse: collapse;" class="w320">
                        <div class="h2">Expand your buisness promotion</div>
                    </td>
                </tr>
                <tr>
                    <td width="367" id="LIRTtext" align="left" valign="top" style="padding-top:10px;padding-bottom:15px;border-collapse: collapse;" class="w320">
                        Nunc pellentesque commodo velit non facilisis. Sed euismod vestibulum ante vel <a href="#">tempor</a>. Vivamus.
                    </td>
                </tr>
                <tr>
                    <td align="left" style="border-collapse: collapse;" class="w320"><a href="#"><img class="image_fix" src="images/button.gif" alt="Read more" /></a></td>
                </tr>       
            </table>
        </td>
    </tr>
</table>

Brian Thies
Thies Publishing
Email: bthies@thiespublishing.com
Skype:  thiespublishing    Twitter: thiesbw

Sign up for free.
Then send campaigns for as little as $9p/m

Create an account