0

My Bootstrap 3 carousel content seems to disappear when I reduce the size of my screen to check for mobile compatibility. The interesting part is that the content and image size is the exact same across all panels. Yet the content behaves differently depending on which panel is being shown.

Am I putting my clearfix in the wrong place? Ive tried in on the "item" div and also the last .col of each panel. Yet when I move to small some content disappears on slide 2 and 3, even with duplicate content.

<div class="item active">
  <div class="bannerImage">
    <a href="#">
      <img src="path/some/image" class="img-responsive" alt="">
    </a>
  </div>
  <div class="purchase container">
    <div class="row">
      <div class="col-xs-12 col-sm-6 col-md-8 animated fadeInLeft">
        <span>....</span>
        <p>....</p>
      </div>
      <div class="col-xs-12 sol-sm-6 col-md-4 btn-buy animated fadeInRight clearfix">
        <a href="#" class="btn-u btn-u-lg"><i class="fa fa-play-circle"></i>Start</a>
      </div>
    </div>
  </div>
</div>

I have tried the clearfix method found in this stack question but it has no effect.

The site can be viewed here.

Community
  • 1
  • 1
Rick Mason
  • 1
  • 2
  • I think it's working fine check here **http://www.responsinator.com/?url=www.weston1.com** – sheshadri Jun 04 '15 at 14:18
  • Actually no it isn't working there either, but damn thanks for the link to that site, will use it always! The "start video" button does not appear on slide 1 and slide 2. – Rick Mason Jun 04 '15 at 14:45

1 Answers1

0

Thanks for looking guys, I found it though. I had a couple of extra div containers in the source that my tired eyes did not catch. Debugging is a miraculous thing.

Rick Mason
  • 1
  • 2