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 Ben Taylor
Ben Taylor
902 Points

Help with my Responsive Slider

Hey guys,

I'm working on my first responsive site and am using Owl Carousel as my slider. It works great, apart form when I go to mobile size. The height is just too small. In a perfect world I'd like it to lose pixels from the left and right of the slider, as I've put the text in my slides within a centralised 960px portion of the slide.

You can see my site here: http://www.hecticdesigns.co.uk/clients/regal/new.html

My question is can this be done by maybe making the slide the background of the div rather than the image within the div?

Any help is MUCH appreciated.

Thanks,

Ben

3 Answers

Mark Flavin
Mark Flavin
10,199 Points

I did something similar recently what I ended up doing was the above and creating some custom JS that kept the height a consistent ratio during the window resize.

http://www.pezops.com/hawkeye/

JS

var responsiveSlider = function(){
    if( $('body').hasClass('home') || $('body').hasClass('responsiveCarousel') ){
      var windowWidth = $( window ).width();
          $height = $('.carousel-inner').height();

      if(  windowWidth <= 992 ) {
        $('#carousel-container').css({
          height: $height
        });
      } else if ( windowWidth > 992 ){
        $('#carousel-container').css({
          height: 400
        });
      }
    }

  };

  window.onload = function() {
   responsiveSlider();
  };

  $( window ).resize(function() {
    responsiveSlider();
  });
Ben Taylor
Ben Taylor
902 Points

Thanks Mark, I'll give it a go

Aaron McMasters
Aaron McMasters
1,951 Points
Aaron McMasters
Aaron McMasters
1,951 Points

have you set min-width/height? maybe in the mobile media query/break point? it looks like the owl wrapper is where to look....making images the background sounds cool until you run into problems.....(I'll let someone who knows more off the top explain this )

Aaron McMasters
Aaron McMasters
1,951 Points
Aaron McMasters
Aaron McMasters
1,951 Points

The site looks good - how are you going to force your columns to order/force down on mobile? Javascript?