Menu icon Foundation
Change direction in Foundation for Email 2

Hi all - in the original Foundation for Email you were able to use text-direction to make an object on the right side of a row move up when going mobile. Is this still possible using Foundation 2?

Responsive

Hi all - in the original Foundation for Email you were able to use text-direction to make an object on the right side of a row move up when going mobile. Is this still possible using Foundation 2?

Corey Schaaf over 3 years ago

I've not heard of this type of functionality in Foundation for Emails. Can you give a few more details? 

[email protected] over 3 years ago

Something like this I think https://www.campaignmonitor.com/blog/email-marketing/2014/10/order-stacked-columns-responsive-email/

Corey Schaaf over 3 years ago

Ah, you said the content on the right side move up.  The content on the right side moves down in your example. You're basically trying to stack columns on small with a two column layout correct? If so: 

Your markup would look like this using inky

<container>
 <row>
   <columns small="12" large="6">I'm on the left on desktop but 1st on mobile.</columns>
   <columns small="12" large="6">I'm on the right on desktop but 2nd on mobile. </columns>
 </row>
</container>

// note every column in a row but be > or = 12 columns.  

Ede Oldi over 3 years ago

@Corey: I believe he is referring to the HTML tags/markup:

<table dir="rtl">
  <tr>
    <td width="50%" dir="ltr">1st column (left)</td>
    <td width="50%" dir="ltr">2nd column (right)</td>
  </tr>
</table>

These allow you to reverse the stacking direction of your columns. In mobile view, the second (right) column would be on top, while the first (left) would follow.

@zrb: Have you tried to change the compiled HTML markup (after "foundation build") and including the dir="rtl" tags there? Should work for all I know, however I've always found this technique somewhat squishy and unpredictable with respect to email-client support.

Corey Schaaf over 3 years ago

Ah, I thought he was asking about simple markup included in INKY.  Forgot about the directional HTML markup.  I have not tried it, although I would be interested if someone has. The article about using directional tags can be found here. It's a great resource. 

While the article was written for Foundation for Emails 1.0, it might be useful for people who aren't using the INKY markup or don't mind modifying the HTML after it's been inlined. 

http://zurb.com/university/lessons/get-your-responsive-emails-in-order

Ilya Shabanov over 3 years ago

For me it works fine using it directly on the INKY row/columns tags like like this:

<row dir="rtl">
<columns dir="ltr">
<p>1st column (left)</p>
</columns>
<columns dir="ltr">
<p>2st column (center)</p>
</columns>
<columns dir="ltr">
<p>3nd column (right)</p>
</columns>
</row>

Rafi Benkual over 3 years ago

Yup - Ilya is right!

Wrote a lesson on this too - http://zurb.com/university/lessons/get-your-responsive-emails-in-order-5abe83ff-4538-4523-abfe-ef0818632eec (this one is for Foundation for Emails 2)

Jarryd Fillmore over 3 years ago

Nice!

Luke over 3 years ago

 awesome guys helped heaps I did see the lesson Rafi but forgot to go back and try it.