I can not understand why this is happening, everything should be abreast because the whole width is relative - there is no fixed place anywhere, but on sm (767-991px) this happens enter image description here

Although all the blocks are the same in essence, they break only in one place.

.product{ width: 100%; position: relative; padding-left: 15px; padding-right: 15px; &__carousel{ width: 100%; } &__item{ width: 100%; display: inline-block; vertical-align: top; position: relative; overflow-x: hidden; } &__block{ width: 100%; padding: 15px; border: 1px solid #fff; border-bottom:none; display: flex; flex-direction: column; } &__img{ width: 100%; } &__img-pos{ margin-bottom: 17px; } &__name{ font-weight: 400; text-align: center; a{ color: @gray888; font-size: 14px; text-transform: uppercase; text-decoration: none; } a:hover{ color: @green; } } &__pricebox{ text-align: center; } &__pricebox-pos{ } &__name-pos{ margin-bottom: 15px; } &__sale{ color: @gray888; text-decoration: line-through; font-size: 15px; } &__sale-pos{ margin-right: 10px; } &__price{ font-size: 20px; font-weight: 300; color: @green; } &__price-red{ color: @red; } &__stars{ color: @green; width: 100%; text-align: center; margin-bottom: 10px; } &__button{ padding: 10px 20px; } &__button-pos{ margin-bottom: 20px; } &__cart{ margin-right: 10px; } &__sprite{ width: 100%; display: flex; flex-direction: row; justify-content: center; } &__link{ display: flex; justify-content: center; align-items: center; height: 40px; width: 40px; border-radius: 50%; background-color: #f1f1f1; color: #c6c6c6; text-decoration: none !important; font-size: 18px; margin-left: 3px; margin-right: 3px; } &__link:hover{ background-color: @darkgray; color: #fff; } &__block-pos{ } &__add-block{ display: none; flex-direction: column; align-items: center; } &__add{ width: 100%; display: none; flex-direction: column; align-items: center; background-color: #fff; padding-top: 5px; padding-bottom: 25px; border: 1px solid #fff; border-top:none; } &__add-pos{ position: absolute; z-index: 4; left: 0; } &__spec-first{ top: 25px; left: 15px; } &__spec-second{ top: 51px; left: 15px; } } 
  <div class="col-xs-12 col-sm-4 padnull"> <div class="product__item"> <div class="product__block product__block-pos"> <img class="product__img product__img-pos ware__img" src="image/men/striped_cotton_blazer_2.jpg" alt=""> <h3 class="product__name product__name-pos"><a href="" class="">STRIPED COTTON BLAZER</a></h3> <div class="product__pricebox product__pricebox-pos"> <span class="product__sale product__sale-pos">$95.00</span> <span class="product__price product__price-red">$79.00</span> </div> </div> <div class="product__add product__add-pos"> <div class="product__add-block"> <button class="button product__button product__button-pos ware__button"> <i class="fa fa-shopping-cart product__cart" aria-hidden="true"></i> add to cart</button> <div class="product__sprite"> <a href="" class="product__link"> <i class="fa fa-heart-o" aria-hidden="true"></i> </a> <a href="" class="product__link"> <i class="fa fa-share-alt" aria-hidden="true"></i> </a> </div> </div> </div> </div> </div>

Here I have laid out the whole site: http://ketty.zzz.com.ua/men.html

PS I tried to replace this block, but another block became its “crooked” place.

    2 answers 2

    Change the structure to:

     <div class="row"> <div class="col-xs-12 col-sm-4 padnull"></div> <div class="col-xs-12 col-sm-4 padnull"></div> <div class="col-xs-12 col-sm-4 padnull"></div> </div> <div class="row"> <div class="col-xs-12 col-sm-4 padnull"></div> <div class="col-xs-12 col-sm-4 padnull"></div> <div class="col-xs-12 col-sm-4 padnull"></div> </div> <div class="row"> <div class="col-xs-12 col-sm-4 padnull"></div> <div class="col-xs-12 col-sm-4 padnull"></div> <div class="col-xs-12 col-sm-4 padnull"></div> </div> ....

    Otherwise, there is no stream cleaning for floating elements.

    • thank! I thought to do so, but decided to save, did not work. - Alexander Alexeev

    The thing is that the block above is one. Because of the name of the goods in 2 lines. Remaining in 1. With the help of height you can leave a reserve for 2 lines for all items. Then nothing will break.

    • Please indicate what did not like the answer if that) Maybe I'm wrong. - Denis Okunev
    • Really you are right (I didn’t think it, and I can’t understand why they put it to you). And how can I fix it without a fixed height, I thought that bs puts everything in line. PS In general, I roughly understood how I have all the lines as if in one row, I need to put my own for each row separately - Alexander Alekseev
    • You can find another solution, of course, if you think that the height for text blocks is zack. Essentially the way it is. But here either this way, or for each line juzat .row - Denis Okunev