/**
* This function fixes full width row of Visual Composer plugin with RTL view.
*
* IMPORTANT NOTE: You should add this script after jquery.js and before js_composer_front.js
*
* @return void
*/
function greenbackend_vc_full_width_rtl_inline_script() {
// Can't continue if the current view is not RTL.
if( ! is_rtl() ) return; ?><script type="text/javascript">
jQuery(document).ready(function(){
function vc_row_full_width_rtl(event){
var vcFullWidth = jQuery('[data-vc-full-width="true"]');
jQuery.each(vcFullWidth, function(){
jQuery(this)
.css('right', parseInt(jQuery(this).css('left'), 10))
.css('left', '');
});
}
function vc_single_row_full_width_rtl(event, data){
data.el.css('right', data.offset).css('left', 'auto');
}
jQuery(document).on('vc-full-width-row-single', vc_single_row_full_width_rtl);
jQuery(window).on('load', vc_row_full_width_rtl);
});
</script><?php
}
add_action('wp_footer', 'greenbackend_vc_full_width_rtl_inline_script');
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;
}
}
Leave a Reply