Owl Carousel and bootstrap width displaying incorrectly

Question

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 1

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.