CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Daniel Robinson
Daniel Robinson

Reputation: 653

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]
 });

Upvotes: 5

Views: 7119

Answers (2)

Sujata Chanda
Sujata Chanda

Reputation: 3395

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.

Upvotes: 2

Nenad Vracar
Nenad Vracar

Reputation: 122027

That is because of this col-xs-12 col-sm-3 owlItem, so bootstrap is creating column of 25% width inside owl-item that is created by owl Carousel like this.

element.style {
  width: 464px;
}

You should remove col-xs-12 col-sm-3 and set widths of your items with owl carousel.

Upvotes: 0

Related Questions