0

The following code is used to display boxes on my site:

<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
    <div class="services-wrapper">
        <i class="ion-android-time"></i>
        <h3>Text header</h3>
        Sample text
    </div>
</div>

and the following CSS is applied:

#services .services-wrapper {
padding: 20px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin-bottom: 40px;
background-color: rgba(255, 255, 255, 0.07);
cursor: pointer;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

I can not understand why 2 of 6 boxes are aligned incorrectly on medium(?)-size displays like iPad (btw, is there any way to have boxes of the same height, but still responsive?): ipad screen

LA_
  • 19,823
  • 58
  • 172
  • 308

4 Answers4

2

It's happening because the box left of the furthest one is taller than the other one. you want to reset every third box from sm and up

For every three of these:

<div class="col-sm-4"> <!-- You only need to declare col-4 once -->
    <div class="services-wrapper">
        <i class="ion-android-time"></i>
        <h3>Text header</h3>
        Sample text
    </div>
</div>

Add one of these:

<div class="clearfix hidden-xs"></div>

So then you would have:

<div class="col-sm-4">
    ...
</div>
<div class="col-sm-4">
    ...
</div>
<div class="col-sm-4">
    ...
</div>

<div class="clearfix hidden-xs"></div>

<div class="col-sm-4">
    ...
</div>
<div class="col-sm-4">
    ...
</div>
<div class="col-sm-4">
    ...
</div>

<div class="clearfix hidden-xs"></div>

You can read more here: http://getbootstrap.com/css/#grid-responsive-resets

Razz
  • 3,995
  • 1
  • 18
  • 15
  • No need to add an extra div. Just use `.col-sm-4:nth-child(3n-2) { clear:left}` – disinfor Nov 02 '15 at 19:41
  • There are several ways to do it yes, but since he's using bootstrap this is the correct way. This also works in more browsers. – Razz Nov 02 '15 at 19:46
  • Why would adding elements be the correct way in bootstrap? Also, `nth-child` also works in most browsers: http://caniuse.com/#search=nth-child – disinfor Nov 02 '15 at 19:50
1

As others have point out in their answers, it's because your middle block on the top row is taller, so the next row starts to it's right. There is no need to add more elements to fix this. You can simply add this to your css:

#services .col-sm-4:nth-child(3n-2) {
    clear:left;
}

This will make the 1st, 4th, 7th, etc. .col-sm-4 clear the preceding row.

disinfor
  • 10,865
  • 2
  • 33
  • 44
0

Try this:

#services .services-wrapper {
    height: 200px;
    padding: 20px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    margin-bottom: 40px;
    background-color: rgba(255, 255, 255, 0.07);
    cursor: pointer;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
Andrew Mast
  • 311
  • 1
  • 17
0

The content in your middle box is extending its height far enough down to make the start point of the next 'row' begin too late. This is one of the reasons I dislike using Bootstrap; you've got to do just as much, if not more, coding, just to fix simple alignment issues that it is designed to 'solve.'

I would probably fix this by adding an extra div after the third block that is set to clear:auto, to make sure that no divs are trying to sit horizontally beside the lower half of a preexisting div.

sarsparillo
  • 53
  • 1
  • 10
  • This isn't a bootstrap issue. This would happen anytime there were `floats` and one of the containers was taller in a row. You don't need to add an extra `div`, you simply need to have the first, third,sixth, etc. `clear:left` – disinfor Nov 02 '15 at 19:39
  • You're right. My bad - I've just been getting annoyed by bootstrap all day, and threw personal opinion into the mix. I like using a div instead of clear:left - it gives me a direct element to target and shift around if necessary, instead of a couple of different ones... although, I guess I could always just use :nth-child[3n+1] – sarsparillo Nov 02 '15 at 19:49
  • I know that feeling :) – disinfor Nov 02 '15 at 19:56