CODEWITHSUNDEEP
cssowl-carousel
user2760338
user2760338

Reputation: 235

Owl Carousel Auto Width with margin not working

I have a fixed height on all my images and need to keep the image in proportion as the screen width gets smaller. 

#owl-demo .item img {
  display: block;
  width: auto;
  height: 300px
}

This works fine until I need to put a margin in between the images. 

#owl-demo .item {
   margin:0 10px 0 10px;
}

The margin won't show and the images are side by side still. The margin will show if I put width: 100% 

#owl-demo .item img {
  display: block;
  width: 100%;
  height: 300px
}

But then the image is no longer in proportion.

I tried with Owl's own demo and this is the case. If you inspect one of the images and change it to the code at the top with width: auto you will see the margin no longer works. You will need to remove the max-width: 100% from the img tag from bootstrap also.

http://owlgraphic.com/owlcarousel/demos/images.html

enter image description here

Upvotes: 2

Views: 7348

Answers (1)

Matt
Matt

Reputation: 57

Looks like you're using version 1.3.X

Try upgrading to version 2 and you'll be fine.

Upvotes: 1

Related Questions