CODEWITHSUNDEEP
csstwitter-bootstrap
Chris Montanaro
Chris Montanaro

Reputation: 18202

links not working on bootstrap xs

I repeat the below div to create a grid of thumbnail wells using bootstrap 3. the problem is that the anchor links do not work on xs (neither the button or the image link), they do however work on sm, md and lg.

<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
  <div class="thumbnail" style="height:520px;">
    <a href="/movies/4539/burnt-offerings-1976"><img src="https://s.ynet.io/assets/images/movies/burnt_offerings_1976/medium-cover.jpg" alt="Burnt Offerings"></a>
    <div class="caption">
      <h5>Burnt Offerings</h5>
      <dl class="dl-horizontal hidden-xs">
        <dt>Year</dt><dd>1976</dd>
        <dt>Rating</dt><dd>6.5</dd>
        <dt>Runtime</dt><dd>1:56</dd>
      </dl>
      <p><a href="/movies/4539/burnt-offerings-1976" class="btn btn-primary btn-sm btn-block">Download</a></p>
    </div>
  </div>
</div>

Upvotes: 0

Views: 1584

Answers (1)

Andy Holmes
Andy Holmes

Reputation: 8077

Your ul.pager is covering all of your elements on col-xs hence why nothing is clickable.

Here is one idea:

on your ul.pager add z-index: 1; and on your <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3"> add another class you can hook onto like this <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 item"> and do .item { position: relative; z-index: 2; }

Upvotes: 1

Related Questions