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

2 Likes