Greg Ledger
New Email
I followed the code from “Creating a Future-Proof Responsive Email Without Media Queries” found at
webdesign.tutsplus.com
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
I followed the steps but I still can't make this work. Please, if you have any ideas, help.
Creating a Future-Proof Responsive Email Without Media Queries
Using this method you can create an email that has responsiveness baked in to the layout, without any need for CSS or media queries in the <head>, so that even in the worst case scenario of...
webdesign.tutsplus.com
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.
