Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Fabio Ozzarini
Fabio Ozzarini
9,679 Points

slick slider ipad/ipad mini issue

Hello, I have a HTML/CSS website and I'm usign slick slider for the fullscreen responsive slider. I wrote im my css 100vh and width:auto and this solution works for every virtual/console devices, but I still have problem on (real) ipad mini... it's look like vh not a CSS right value.

1 Answer

Craig Watson
Craig Watson
27,930 Points
Craig Watson
Craig Watson
27,930 Points

Hi Fabio,

Viewport sizes in my experience are still a little buggy, I tried using them for a landing page that was full height and width but as you mention on the iPads it gets a little messed up.

Try a little jQuery function to set the height of the slider rather than the vh value. 

    var windowHeight = $( window ).height() - 90; //90 is height of my nav

    $( '.front-page-1' ) .css({'height': windowHeight +'px'});

    $( window ).resize(function(){

        var windowHeight = $( window ).height();

        $( '.front-page-1' ) .css({'height': windowHeight +'px'});

    });

I have used this before on a site works well, may need a tweak or two for yours.

Craig