Streaming live at 10am (PST)

RTL and columns in Tablet, Mobile Landscape and Mobile Portrait views


#1

Hello folks,

I am designing an Arabic site which takes right to left direction, seems everything goes well so far but I've one issue.

When I move to phone portrait the columns appear reverse on the RTL site.

"A picture is worth a thousand words" :)

Any suggestion?

Thanks


#2

float: right; right? smile Set it's float: left; and in custom code in dashboard add this:

<style>
  body {
    direction: rtl;
  }
</style>

#3

@myhusam How do you have it set up right now? Can you post your Public Link so we can see?

@bartekkustra we already have RTL support in the typography panel here:

smile


#4

Oh sorry. Didn't know... Must have missed it somehow... ;s Sorry smile


#5

@bartekkustra THANKS a lot for your reply, me either i didn't see this option smile

@thesergie THANKS for your help. I post a public link for a quick test because I am afraid the one I am developing won't be clear for you; it's on Arabic Language!

Here is the link:
http://rtl-test.webflow.com/


#6

Ok @myhusam you expect the order to go the opposite way? Do you expect all RTL websites to stack this way show below:

Desktop:

Content-3 Content-2 Content-1

Mobile:

Content-1
Content-2
Content-3

Can you show me a responsive RTL site that does this? Thanks!


#7

@thesergie Yeah exactly! Here is an example from Foundation:
http://zurb.com/playground/projects/foundation-rtl/demo/banded.html


#8

Thanks @myhusam. Currently RTL only affects the text behavior, not the column ordering. We're figuring out a way to reverse the column order. Hold tight!


#9

For now, just add the following in your header:

<style>
.w-col {
    	float: right !important;
  	}
</style>

However, it won't be visible until you publish.
If you want it in design mode, you have to either put the code above in a HTML Embed widget, or use Stylish.

Good luck smiley


#10

Any updates on re-ordering the stacking of columns?


#11

@thesergie @bart Any news on the ability to reverse certain columns when they stack? I have a few sites that have opposite content on either side but I'd like the to stack the same way on mobile.


#12

We have something coming soon that will provide a solution for this.


#13

Hi, any news regarding this issue?


#14