Streaming live at 10am (PST)

How to make Webflow supports RTL in your website

Webflow is the ultimate tool for me, and it just keeps getting better. I’m bored of hand coding HTML & CSS.
The best thing, is that you can override whatever you want right from Webflow’s interface.

I was disappointed that the grid system does not support RTL, but was astonished by the simplicity of the quick workaround.

In your website design mode:
Highlight body tag.
From the style panel, go to Typography, and toggle “advanced”.
Click the little square button that says “RTL”.

In your website custom HEAD:

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

Save, and publish.

That’s it!

Note:
If you want your website to display the columns in RTL in design mode, it won’t be default… it’s a know limitation.

However, if you like to hack more, check my other post in here.

and this

1 Like