CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Billy Moon
Billy Moon

Reputation: 58551

with bootstrap, adding position absolute changes width of element

I have an unusual responsive layout I need to do in CSS only. I have it all working except that for tablet view (768px - 992px) box A (the red one) has the wrong width. This happens when I apply position absolute, which I am doing in order to take it out of the flow, and allow the rest of the elements to move into place.

.red {
  height: 150px;
  background-color: red;
}
.green {
  height: 150px;
  background-color: green;
}
.blue {
  height: 150px;
  background-color: blue;
}
.yellow {
  height: 150px;
  background-color: yellow;
}
@media (min-width: 768px) and (max-width: 992px) {
  /* `.row` added for specificity's sake */
  .row .red {
    position: absolute;
    top: 150px;
    z-index: 1000;
  }
}
@media (min-width: 992px){
  .items {
    height: 50px;
  }
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-xs-3 col-sm-4 col-md-4 red">A</div>
    <div class="col-xs-3 col-sm-12 col-md-8 green items">B</div>
    <div class="col-xs-3 col-sm-4 col-sm-offset-4 col-md-offset-0 col-md-8 blue items">C</div>
    <div class="col-xs-3 col-sm-4 col-md-8 yellow items">D</div>
  </div>
</div>

How can I adjust this so that box A has the same size as C and D on tablet view?

(I am open to completely re-thinking the way the layout is achieved)

Fiddle: http://jsfiddle.net/billymoon/e64qLhp1/1/

Upvotes: 5

Views: 3364

Answers (1)

Felix A J
Felix A J

Reputation: 6480

Can be fixed by adding position: relative to that wrapping row div..

Upvotes: 6

Related Questions