Visual Composer Problem in RTL Language

Hello

Visual Composer (WPBekery) Problem in RTL Language

1. In backend editor, it’s hard to scroll.
2. In frontend editor, the width of the page can not be fully fetched.
3. The column gap is not coordinated around and only applied to the left.(Very important)

Problem 2 Picture

Attachments:

You must be logged in to view attached files.

Hi,

Please, provide us your admin access so we can check these problems.

Thank you

My Admin Access

Hi,

1. We have tested your website but didn’t experience this issue and the scroll works correctly for us.

2 & 3. Try to put this code snippet to the style.css in your child theme to fix this since Visual Composer is not fully optimized for RTL initially

.rtl .vc_non_responsive .vc_row .vc_col-sm-offset-12 {
  margin-left: 0;
  margin-right: 100%;
}
.rtl .vc_non_responsive .vc_row .vc_col-sm-offset-11 {
  margin-left: 0;
    margin-right:91.66666667%;
}
.rtl .vc_non_responsive .vc_row .vc_col-sm-offset-10 {
  margin-left: 0;
    margin-right:83.33333333%;
}
.rtl .vc_non_responsive .vc_row .vc_col-sm-offset-9 {
  margin-left: 0;
    margin-right:75%;
}
.rtl .vc_non_responsive .vc_row .vc_col-sm-offset-8 {
  margin-left: 0;
    margin-right:66.66666667%;
}
.rtl .vc_non_responsive .vc_row .vc_col-sm-offset-7 {
  margin-left: 0;
    margin-right:58.33333333%;
}
.rtl .vc_non_responsive .vc_row .vc_col-sm-offset-6 {
  margin-left: 0;
    margin-right:50%;
}
.rtl .vc_non_responsive .vc_row .vc_col-sm-offset-5 {
  margin-left: 0;
    margin-right:41.66666667%;
}
.rtl .vc_non_responsive .vc_row .vc_col-sm-offset-4 {
  margin-left: 0;
    margin-right:33.33333333%;
}
.rtl .vc_non_responsive .vc_row .vc_col-sm-offset-3 {
  margin-left: 0;
    margin-right:25%;
}
.rtl .vc_non_responsive .vc_row .vc_col-sm-offset-2 {
  margin-left: 0;
    margin-right:16.66666667%;
}
.rtl .vc_non_responsive .vc_row .vc_col-sm-offset-1 {
  margin-left: 0;
    margin-right:8.33333333%;
}
.rtl .vc_non_responsive .vc_row .vc_col-sm-offset-0 {
  margin-right:0;
}

.rtl .vc_col-xs-offset-12 {
  margin-left: 0;
    margin-right:100%;
}
.rtl .vc_col-xs-offset-11 {
  margin-left: 0;
    margin-right:91.66666667%;
}
.rtl .vc_col-xs-offset-10 {
  margin-left: 0;
    margin-right:83.33333333%;
}
.rtl .vc_col-xs-offset-9 {
  margin-left: 0;
    margin-right:75%;
}
.rtl .vc_col-xs-offset-8 {
  margin-left: 0;
    margin-right:66.66666667%;
}
.rtl .vc_col-xs-offset-7 {
  margin-left: 0;
    margin-right:58.33333333%;
}
.rtl .vc_col-xs-offset-6 {
  margin-left: 0;
    margin-right:50%;
}
.rtl .vc_col-xs-offset-5 {
  margin-left: 0;
    margin-right:41.66666667%;
}
.rtl .vc_col-xs-offset-4 {
  margin-left: 0;
    margin-right:33.33333333%;
}
.rtl .vc_col-xs-offset-3 {
  margin-left: 0;
    margin-right:25%;
}
.rtl .vc_col-xs-offset-2 {
  margin-left: 0;
    margin-right:16.66666667%;
}
.rtl .vc_col-xs-offset-1 {
  margin-left: 0;
    margin-right:8.33333333%;
}
.rtl .vc_col-xs-offset-0 {
    margin-right:0%;
}

@media (min-width: 768px) {

  .rtl .vc_col-sm-offset-12 {
    margin-left: 0;
    margin-right:100%;
  }
  .rtl .vc_col-sm-offset-11 {
    margin-left: 0;
    margin-right:91.66666667%;
  }
  .rtl .vc_col-sm-offset-10 {
    margin-left: 0;
    margin-right:83.33333333%;
  }
  .rtl .vc_col-sm-offset-9 {
    margin-left: 0;
    margin-right:75%;
  }
  .rtl .vc_col-sm-offset-8 {
    margin-left: 0;
    margin-right:66.66666667%;
  }
  .rtl .vc_col-sm-offset-7 {
    margin-left: 0;
    margin-right:58.33333333%;
  }
  .rtl .vc_col-sm-offset-6 {
    margin-left: 0;
    margin-right:50%;
  }
  .rtl .vc_col-sm-offset-5 {
    margin-left: 0;
    margin-right:41.66666667%;
  }
  .rtl .vc_col-sm-offset-4 {
    margin-left: 0;
    margin-right:33.33333333%;
  }
  .rtl .vc_col-sm-offset-3 {
    margin-left: 0;
    margin-right:25%;
  }
  .rtl .vc_col-sm-offset-2 {
    margin-left: 0;
    margin-right:16.66666667%;
  }
  .rtl .vc_col-sm-offset-1 {
    margin-left: 0;
    margin-right:8.33333333%;
  }
  .rtl .vc_col-sm-offset-0 {
    margin-right:0;
  }
}
@media (min-width: 992px) {

  .rtl .vc_col-md-offset-12 {
    margin-left: 0;
    margin-right:100%;
  }
  .rtl .vc_col-md-offset-11 {
    margin-left: 0;
    margin-right:91.66666667%;
  }
  .rtl .vc_col-md-offset-10 {
    margin-left: 0;
    margin-right:83.33333333%;
  }
  .rtl .vc_col-md-offset-9 {
    margin-left: 0;
    margin-right:75%;
  }
  .rtl .vc_col-md-offset-8 {
    margin-left: 0;
    margin-right:66.66666667%;
  }
  .rtl .vc_col-md-offset-7 {
    margin-left: 0;
    margin-right:58.33333333%;
  }
  .rtl .vc_col-md-offset-6 {
    margin-left: 0;
    margin-right:50%;
  }
  .rtl .vc_col-md-offset-5 {
    margin-left: 0;
    margin-right:41.66666667%;
  }
  .rtl .vc_col-md-offset-4 {
    margin-left: 0;
    margin-right:33.33333333%;
  }
  .rtl .vc_col-md-offset-3 {
    margin-left: 0;
    margin-right: 25%;
  }
  .rtl .vc_col-md-offset-2 {
    margin-left: 0;
    margin-right:16.66666667%;
  }
  .rtl .vc_col-md-offset-1 {
    margin-left: 0;
    margin-right:8.33333333%;
  }
  .rtl .vc_col-md-offset-0 {
    margin-right:0;
  }
}
@media (min-width: 1200px) {
  .rtl .vc_col-lg-offset-12 {
    margin-left: 0;
    margin-right:100%;
  }
  .rtl .vc_col-lg-offset-11 {
    margin-left: 0;
    margin-right: 91.66666667%;
  }
  .rtl .vc_col-lg-offset-10 {
    margin-left: 0;
    margin-right:83.33333333%;
  }
  .rtl .vc_col-lg-offset-9 {
    margin-left: 0;
    margin-right:75%;
  }
  .rtl .vc_col-lg-offset-8 {
    margin-left: 0;
    margin-right:66.66666667%;
  }
  .rtl .vc_col-lg-offset-7 {
    margin-left: 0;
    margin-right:58.33333333%;
  }
  .rtl .vc_col-lg-offset-6 {
    margin-left: 0;
    margin-right:50%;
  }
  .rtl .vc_col-lg-offset-5 {
    margin-left: 0;
    margin-right:41.66666667%;
  }
  .rtl .vc_col-lg-offset-4 {
    margin-left: 0;
    margin-right:33.33333333%;
  }
  .rtl .vc_col-lg-offset-3 {
    margin-left: 0;
    margin-right: 25%;
  }
  .rtl .vc_col-lg-offset-2 {
    margin-left: 0;
    margin-right: 16.66666667%;
  }
  .rtl .vc_col-lg-offset-1 {
    margin-left: 0;
    margin-right: 8.33333333%;
  }
  .rtl .vc_col-lg-offset-0 {
    margin-right: 0%;
  }
}

Regards

Not corrected!

Attachments:

You must be logged in to view attached files.

Sorry, add this also

div#wpcontent, div#wpfooter {
	margin-right: 0;
}

div#wpcontent {
	padding-right: 0;
}

Not corrected!

My DirectAdmin profile:

and
The Visual Composer (WPBekery) plugin is not active in HTML Blocks. Please enable it.

Attachments:

You must be logged in to view attached files.

Unfortunately, our theme styles are not applied on the editor page. But when you visit your website on frontend it will work correctly. If you want to fix the editor you will need to find its CSS files and add the following code there

.rtl.vc_editor div#wpcontent, div#wpfooter {
	margin-right: 0;
}

.rtl.vc_editor div#wpcontent {
	padding-right: 0;
}

For HTML Block you can activate easily in Dashboard -> WPBakery page builder.

I do not understand! There was no problem in previous versions! Look at the front page of the site. The right does not change.

For HTML Block, I did not find anything!

Attachments:

You must be logged in to view attached files.

It was before the update as well. Try to add the following code snippet as well since we didn’t see it before

html.platform-Windows .rtl.wrapper-full-width .vc_row[data-vc-full-width], html.platform-Windows .rtl.wrapper-full-width section[data-vc-full-width] {
  right: auto;
  left: calc((100vw - 1222px - 17px)/ 2);
}

body.rtl.wrapper-full-width .vc_row[data-vc-full-width], 
body.rtl.wrapper-full-width section[data-vc-full-width] {
  right: auto;
  left: calc((100vw - 1222px)/ 2);
}

body.rtl .vc_row[data-vc-full-width], 
body.rtl section[data-vc-full-width] {
    right: auto;
    left: calc((-100vw - -95vw)/ 2);
}

Read this article about how to enable the builder for other post types https://wpbakery.atlassian.net/wiki/spaces/VC/pages/524324/I+can+not+use+WPBakery+Page+Builder+on+Posts+and+Custom+Posts

Thank you for your guidance. I enabled HTML Block.
But my problem about Visual Composer has not been resolved. 😢

The issue seems to be solved on the frontend https://gyazo.com/8b18b6e23fb32f18027ebc1b19ede0c1
Please, check again now and don’t forget to clear the cache.

Yeah, that was.
Thank you very very much. 🙏💪

If possible, give me the css code to set the height of rows in Visual Composer like 500 pixels.

Attachments:

You must be logged in to view attached files.

But you don’t need to specify the row height since you can increase it adding top and bottom paddings.

Thanks a lot.

[Author]

Posts