Owl carousel and bootstrap width do not display correctly

Question

I really have an example of this problem.
If you click on the link, you will see the proposed pages halfway down.
These sentences are displayed completely incorrectly.
It is assumed that they will have the full width of the mobile phone, and then col-sm-3 for all other devices.

www.exclusivecard.co.uk

This happened only after I added an owl carousel to them. I will send the code 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 with col-md-12 in the owlItem class, since col-xs-12 is an additional small class, and md / lg is used for desktop representations.

Answer 2

This is because of this col-xs-12 col-sm-3 owlItem , so bootstrap creates a 25% wide column inside the owl-item , which is created by an owl carousel like this.

 element.style { width: 464px; } 

You must remove col-xs-12 col-sm-3 and set the width of your items using the owl carousel.