Daniel Robinson Daniel Robinson - 1 month ago 26
CSS Question

Owl Carousel and bootstrap width displaying incorrectly

I actually have an example of this problem.

If you click the link you will see half way down the page featured offers.

These offers are displaying completely incorrectly.

They are supposed to be full width mobile and then col-sm-3 for all other devices.

www.exclusivecard.co.uk

this only happened since I added owl carousel to them. I will post the code below anyway.

styles

#offerslide .owlItem{
display: block;
width: 100%;
height: auto;
}


page

<div class="owlslide">
<a href="somelink">
<div class="col-xs-12 col-sm-3 owlItem">

<div class="row" id="yellow">
<div class="col-xs-12 ">
<div class="panel panel-warning coupon">
<div class="panel-heading" id="head">
<div class="panel-title" id="title">

<span >title</span>
</div>
</div>
<div class="panel-body">

<img>
<div class="col-md-12 text-warning">
<div class="offer">
<span class="number">[saving]</span>
</div>
</div>

</div>
<div class="panel-footer" id="coupon-backing">
<div class="coupon-code">
[cat]
<span class="print">
[expires]
</span>

</div>

</div>
</div>
</div>
</div>
</div>

</a>
</div>


jquery

$("#owlslide").owlCarousel({
autoPlay: 3000, //Set AutoPlay to 3 seconds
items : 3,
itemsDesktop : [1199,2],
itemsDesktopSmall : [979,3]
});

Answer

Replace col-xs-12 to col-md-12 in owlItem class as col-xs-12 is an extra small class and md/lg is used for desktop representations.