Daniel Robinson Daniel Robinson - 10 months ago 79
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.


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


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


<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 class="panel-body">

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

<div class="panel-footer" id="coupon-backing">
<div class="coupon-code">
<span class="print">





autoPlay: 3000, //Set AutoPlay to 3 seconds
items : 3,
itemsDesktop : [1199,2],
itemsDesktopSmall : [979,3]

Answer Source

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.