Menu icon Foundation

My Posts





  • 3
    Replies
  • Orbit only on mobile view

    By Faycal

    Orbitinterchange

    Hi, I'd like to use ORBIT only on "mobile" view (for 3 columns) In the medium and large views i'd like to use classic columns (6 for large and 4 for medium). Can I use interchange for it or do you have other solution? This is my html code:

    Last Reply by Faycal over 3 years ago



My Comments

Faycal commented on Faycal's post over 2 years

Is there a tutorial on how to customize a new installation? The custom build is
still not working

Faycal commented on Faycal's post over 2 years

someone has my same problem?

Faycal commented on Faycal's post over 2 years

Great Brian Tan! I used F6 script

Faycal commented on Faycal's post over 2 years

Thank you brandon, i tried it but i've problems with the height of the column C (it's in overlay on the footer of the page).

I think that the solution is to duplicate the HTML of the C box and use show-for... and hide-for... but i don't like it or jquery....

Faycal commented on Faycal's post over 3 years

I solved it using the slick plugin http://kenwheeler.github.io/slick/ and a javascript function.

    $(document).ready(function(){    
        var $window = $(window)
          , $card = $('.circle')
          , toggleSlick;

        toggleSlick = function () {
        if ($window.width() < 600) {
          if (!$card.hasClass('slick-initialized')) {
          console.log("slick");
          $card.slick({
          infinite: true,
          slidesToShow: 2,
          slidesToScroll: 2,
          centerMode:true
            });
           }
        } else {
          if ($card.hasClass('slick-initialized')) {
             console.log("unslick");
                       $card.unslick();
                   }
          //$card.unslick();
        }
        }

        $window.resize(toggleSlick);
        toggleSlick();

        });


    </script>

Faycal commented on Faycal's post over 3 years

Thank you,
If i use visibility classes i have to duplicate the contents, is it rights?

I have to create a row with "hide-for-small-down" and an orbit with "hide-for-medium-up" with the same contents..

Do you know a solution to avoid the duplication of content on the HTML page?

Faycal commented on Faycal's post over 3 years

This is the solution I had imagined! Thank you!

Posts Followed


Following

    No Content

Followers

My Posts







My Comments

You commented on Faycal's post over 2 years

Is there a tutorial on how to customize a new installation? The custom build is
still not working

You commented on Faycal's post over 2 years

someone has my same problem?

You commented on Faycal's post over 2 years

Great Brian Tan! I used F6 script

You commented on Faycal's post over 2 years

Thank you brandon, i tried it but i've problems with the height of the column C (it's in overlay on the footer of the page).

I think that the solution is to duplicate the HTML of the C box and use show-for... and hide-for... but i don't like it or jquery....

You commented on Faycal's post over 3 years

I solved it using the slick plugin http://kenwheeler.github.io/slick/ and a javascript function.

    $(document).ready(function(){    
        var $window = $(window)
          , $card = $('.circle')
          , toggleSlick;

        toggleSlick = function () {
        if ($window.width() < 600) {
          if (!$card.hasClass('slick-initialized')) {
          console.log("slick");
          $card.slick({
          infinite: true,
          slidesToShow: 2,
          slidesToScroll: 2,
          centerMode:true
            });
           }
        } else {
          if ($card.hasClass('slick-initialized')) {
             console.log("unslick");
                       $card.unslick();
                   }
          //$card.unslick();
        }
        }

        $window.resize(toggleSlick);
        toggleSlick();

        });


    </script>

You commented on Faycal's post over 3 years

Thank you,
If i use visibility classes i have to duplicate the contents, is it rights?

I have to create a row with "hide-for-small-down" and an orbit with "hide-for-medium-up" with the same contents..

Do you know a solution to avoid the duplication of content on the HTML page?

You commented on Faycal's post over 3 years

This is the solution I had imagined! Thank you!

Posts Followed


Following

  • No Content

Followers

  • No Content