1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
/** * 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
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; } } |