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
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 | Envato Tuts+
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.