-
-
Save aliaghdam/414d6e7f916c056a121a98ba64d0b7c0 to your computer and use it in GitHub Desktop.
jQuery(document).ready(function() { | |
function bs_fix_vc_full_width_row(){ | |
var $elements = jQuery('[data-vc-full-width="true"]'); | |
jQuery.each($elements, function () { | |
var $el = jQuery(this); | |
$el.css('right', $el.css('left')).css('left', ''); | |
}); | |
} | |
// Fixes rows in RTL | |
jQuery(document).on('vc-full-width-row', function () { | |
bs_fix_vc_full_width_row(); | |
}); | |
// Run one time because it was not firing in Mac/Firefox and Windows/Edge some times | |
bs_fix_vc_full_width_row(); | |
}); |
How to use this code in my template?
Where do I put Js file?
@serguk89
I use your code in my theme but row is very strech .
help me.
Worked perfectly! Thanks @aliaghdam!
thanks ;)
CSS Solution:
body.rtl .vc_row[data-vc-full-width] {
position: relative;
width: 100vw !important;
right: 50% !important;
left: auto !important;
transform: translateX(50%) !important;
padding-left: calc( (100vw - 1140px) / 2 ) !important;
padding-right: calc( (100vw - 1140px) / 2 ) !important;
}
@media(max-width:767px){
body.rtl .vc_row[data-vc-full-width] {
padding-left: 15px !important;
padding-right: 15px !important;
margin-right: 0 !important;
margin-left: 0 !important;
}
}
I hope it help
thank you so so so much , thank you !! thank you , you saved me <3 <3 <3
Worked like a charm!
@serguk89
Thanks
Well, thank you all so much. this helped me a lot 👍
but, I had to tweak it a little bit.
I did it as a separate class on each row needed a fix. and I used 2 classes.
.fixRtl { position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; width: 100%; width: 100vw !important; padding-left: calc( (100vw - 1140px) / 2 ) !important; padding-right: calc( (100vw - 1140px) / 2 ) !important; }
and the other one was:
.fixRtlTwo { position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; width: 100%; width: 100vw !important; }
the reason was, some rows only worked with the first class & some worked with the second one, plus for some reason, it did affect the English rows when I made them in theme-wide.
This is what I have
WordPress - version 5.0.2
Xstore Theme - 5.1.3 (child 1.0)
Polylang - Version 2.5
WPBakery Page Builder - Version 5.5.2
Thank you very much
Thank you so much
dear friend
thank you for fixing this problem
do me a favor and please tell us to which file this script has to be added exactly
@serguk89 Thank you for the code. It finally working!
@WWGate Thank you for media CSS, working.
I am using WordPress 5.3.2 and WPBakery Page Builder 6.1.0, on Nginx (LEMP) with PHP 7.3 including plugins W3 Total Cache (page, browser, object, database + cloudflare setup) & Autooptimize (JS, HTML, CSS) and and CloudFlare Free Plan.
Do not know why it stopped working after upgrading WPBakery to the latest one, also switching on the better server -.-
Thanks again, solved my problem after a research and going crazy about it :D
Hello
i tryed to improve this code
function bs_fix_vc_full_width_row() {
if(jQuery('[data-vc-full-width="true"]:first').css( 'left' ) == 'auto') return;
let rightAuto = jQuery('[data-vc-full-width="true"]:first').css( 'right' ) == 'auto' ;
if( jQuery('html').attr('dir') == 'rtl' && !rightAuto){
jQuery('[data-vc-full-width="true"]').each( function(i,v){
jQuery(this).css('right' , jQuery(this).css('left') ).css( 'left' , 'auto');
});
}
}
Hello
Only this code worked for me correctly
function bs_fix_vc_full_width_row(){
var $elements = jQuery('[data-vc-full-width="true"]');
jQuery.each($elements, function () {
var $el = jQuery(this);
$el.css('left', $el.css('right')).css('right', 'auto');
});
}
You're the best @aliaghdam , saved my project.
Thank serguk89! Your solution worked with my project.