Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • March 20, 2016 at 5:29 pm #600857
    talelie

    Hi,

    I have a page with 2 columns, on mobile the left column comes first, and I need the right column to be the first
    reading the site from right to left, so the content should flow from right to left.

    need your assistant.

    Thanks
    Tal

    March 20, 2016 at 8:46 pm #600881
    Basilis

    Hi talelie!

    In mobile view your elements are going to display as 100% width so it depends on the structure of your elements, which comes first in the document, etc etc.

    By default the columns are floated left but you can use this CSS to float them right.

    
div .flex_column { float: right !important; }

    And then restructure your content (move them to the correct order) so they display correctly on mobiles. You may have to do some other CSS work such as margins etc etc.

    div .av_one_third { margin-right: 6%; margin-left: 0px !important; }
div .av_one_third.first { margin-right: 0px !important; }

    Best regards,
    Basilis

    March 21, 2016 at 9:03 am #601116
    talelie

    Hi Basilis,

    I have added the suggested CSS but still the left column appears first.
    please see it here
    http://www.travelway.co.il/golan-heights/

    Thanks
    Tal

    March 21, 2016 at 11:25 am #601155
    talelie

    Hi Basilis,

    I also tried to insert the following code to the child-theme function.php file, but it changed the entire order of the page, it brought up the lower parts of the page.

    this is the code, suggested by Josue:

    function rtl_columns_fix(){
    ?>
    <script>
    (function($){

    var resizeTimeout, sortedReverse = false;
    $(window).resize(function () {
    if (resizeTimeout) {
    window.clearTimeout(resizeTimeout);
    }
    resizeTimeout = window.setTimeout(function () {
    var windowWidth = window.innerWidth;
    if ((windowWidth < 767 && !sortedReverse) || (windowWidth >= 767 && sortedReverse)) {

    var rtlContainer = $(‘.entry-content-wrapper’);

    rtlContainer.each(function(){
    var rtlCols = $(this).children(‘.flex_column’).not(‘.av_one_full’);
    $(this).append(rtlCols.get().reverse());
    });

    sortedReverse = !sortedReverse;
    }
    }, 100);
    }).trigger(“resize”);

    })(jQuery);

    </script>
    <?php
    }
    if(is_rtl()) {
    add_action(‘wp_footer’, ‘rtl_columns_fix’);
    }

    March 25, 2016 at 7:51 am #603584
    Ismael

    Hey!

    Thank you for the info. I would like to check the page but the page password is not working. Please check. Do you want to sort specific columns? Or do you want all columns in reverse? You can try the simple fix in the following link but it will require a few modifications base on your setup: https://kriesi.at/support/topic/construction-demo-2/#post-587552

    Cheers!
    Ismael

    March 30, 2016 at 12:02 pm #605098
    talelie

    Hi Ismael,

    Done what you’ve suggested and it works!

    Thanks,
    Tal

    March 30, 2016 at 12:43 pm #605114
    Vinay

    Hey!

    Glad we could help :) We have put together some info about enfold theme please feel free to check it out here – http://kriesi.at/documentation/enfold/

    Regards,
    Vinay

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.