Visual Composer (WPBekery) Problem in RTL Language

Hello Again.

You have been solved by giving this code my site’s problem. This topic

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);
}

But I noticed a small problem in mobile mode!
By opening the site in mobile mode, the sections are about 10 to 15 pixels to the right and an empty space to the left is created. This problem is solved by scrolling the page down. Why? (Please see the attached image.)

Attachments:

You must be logged in to view attached files.

Hi,

Try to add the following code snippet to the custom CSS to fix this issue.

@media (max-width: 1024px) {

.vc_row[data-vc-full-width], 
section[data-vc-full-width] {
    left:0!important;
}
	
}

Got worse. Now it’s a problem for the desktop version. I also deleted the browser cache.

Attachments:

You must be logged in to view attached files.

We have disabled WPRocket plugin to prevent caching. Please, check how it works now.

fixed. Should I not use WPRocket plugin?

We suggest you to use WP super cache + Better WordPress Minify plugins for cache and CSS and JS optimization.

And another question
I want to put two different images in a column in the Visual Composer. In a mobile mode, a picture and in a desktop mode have another picture. Is it possible in Visual Composer? By add-on for Visual Composer?

You can use hidden-xs class for the image that should be shown on desktop and visible-xs for the picture that will be displayed on mobile.

Is it possible to give me full code, please?

But there is no code for this. You can use Single image element for this and add extra CSS classes to them.

Thanks a lot.

You are welcome!

To display on the tablet also code?

Where can I learn these codes?

For example, would it be possible to display 600 pixels of image of the desktop version?

Read all available options here https://www.tutorialspoint.com/bootstrap/bootstrap_responsive_utilities.htm

Hello Again

New problem:
I want to change the row stretch in margin but no changes!

Hello,

We tried to set margins for rows and it works correctly for us https://gyazo.com/641b9c52bfcfb5774cb407958b936599
Where can we see this issue?

Regards

Hi

I’m sorry! Custom CSS returned to the Defaults.Please give me the codes in Global Custom CSS, mobile landscape and mobile.

Thanks

What codes do you mean?

Did you enter your codes in sections mobile landscape and mobile Custom CSS?

All the code we gave you can find in the topics conversations between us. Also, we will release an update tomorrow that will fix all RTL issues.

Thank you very much.

You are welcome!

[Author]

Posts