Problem with "rtl" and "ltr" not working

Greg Ledger

New Email
I followed the code from “Creating a Future-Proof Responsive Email Without Media Queries” found at

AFTER ADDING THE RTL/LTR CODE
(Error is that the second column containing the text “View in Browser” still wrapping below the first column; goal is to have the View in Browser text column appear before or on top of the first column)

This is the one media query affecting this div
Code:
 @media screen and (max-width: 460px) {
      .two-col .column {
        max-width: 100% !important;
      }
      .two-col .vib {
        max-width: 100% !important;
        text-align: center !important;
      }
      .two-col img {
        width: 100% !important;
      }
    }


<!-- *************************************************************
START VIEW IN BROWSER -->
    <div class="two-col" style="text-align: center; font-size: 0px; background-color: #ffffff;direction:rtl;">

                    <!--[if mso]>
                       <table role="presentation" width="100%" dir="rtl">
                    <tr>
                    <td style="width:50%; padding:10px 20px;" valign="top" dir="ltr">
                    <![endif]-->

                     <div class="column" style="width: 100%; max-width:330px; display: inline-block; vertical-align: top; direction:ltr;" >
                        <div class="vib" style="padding:10px 20px;font-size:14px;line-height:18px;text-align:left;">
                        <p style="Margin:0; font-family: Arial, sans-serif; font-size: 14px; line-height: 18px;">
Title of Newletter, Issue Number, Date</p>
                        </div>
                    </div>
                    <!--[if mso]>
                    </td>
                    <td style="width:50%; padding:10px 20px;" valign="top" dir="ltr">
                    <![endif]-->
                        <div class="column" style="width: 100%; max-width:330px; display: inline-block; vertical-align: top;direction:ltr;">
                            <div class="vib" style="padding:10px 20px;font-size:14px;line-height:18px;text-align:right;">
                            <p style="Margin-top:0;Margin-bottom:0px;font-family:Arial,sans-serif;">
                                <a style="color: black;text-decoration:underline;" href="#" target="_blank">VIEW IN BROWSER</a>
                            </p>
                        </div>
                    </div>
                    <!--[if mso]>
                    </td>
                    </tr>
                    </table>
                <![endif]-->
            </div>           


<!-- END VIB -->

I followed the steps but I still can't make this work. Please, if you have any ideas, help.
 
Top