Skip to content

Instantly share code, notes, and snippets.

@rpgroot
Last active April 7, 2020 11:46
Show Gist options
  • Save rpgroot/bafbae94ffab1d41c458826f4dfe9f2c to your computer and use it in GitHub Desktop.
Save rpgroot/bafbae94ffab1d41c458826f4dfe9f2c to your computer and use it in GitHub Desktop.
wordpress wpbakery (js composer) rtl stretch full (full width) problem fix
/*add this code to theme fucntion.php file, if rtl true must run js
if ( is_rtl() ) {
wp_enqueue_script( 'script', get_stylesheet_directory_uri() . '/jscomposer-full-width-rtl-fix.js', array ( 'jquery' ), 1.1, true);
}
*/
jQuery(document).ready(function() {
function jscomposer_full_width_rtl_fix(){
var $elements = jQuery('[data-vc-full-width="true"]');
jQuery.each($elements, function () {
var $el = jQuery(this);
$el.css('right', $el.css('left')).css('left', '');
});
}
jQuery(document).on('vc-full-width-row', function () {
jscomposer_full_width_rtl_fix();
});
jscomposer_full_width_rtl_fix();
});
/*solution2 fix by css - append this code to rtl.css*/
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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment