See: http://www.anniestasjes.nl/40/producten.html?category=tassen I use bootstrap 3 for responsive layout. I get these huge gaps between products because sometimes the product title takes up two rows and the height of the div is a bit more then the other products. Someone knows a fix for this?
Make sure you're using the latest version of Bootstrap (currently v3.2.0).
The newly added responsive utilities will help you to accomplish this, as described in the documentation here.
Insert this div between the "rows":
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs-block"></div>
Explanation:
Responsive column resets
With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive utility classes.
So, in your case, you need to have a clearfix added for each of the lg/md breakpoints after every third element; for the sm elements after every fourth element; and for every xs element after every second element. Here's a Bootply example of how that would look.
Please note that as pointed out by @sean-ryan, you should be using the .row
class instead of the old row-fluid, and you should not be wrapping the entire column in an anchor tag. I've corrected that below (and adjusted your css in the Bootply accordingly).
<div class="container">
<div class="row products">
<div class="col-md-4 col-sm-3 col-xs-6 product">
<a href="/40/128/cowboysbag-the-bag-black.html">
<img src="http://www.anniestasjes.nl/image_resizer.php//files/products/picture_128_1_5L4Ts18Qml.jpg?width=800&height=800&cropratio=1:1&image=/files/products/picture_128_1_5L4Ts18Qml.jpg" class="img-responsive" border="0">
<h4>Cowboysbag 'The Bag' Black</h4>
<div class="price">€ 129,95</div>
</a>
</div>
<div class="col-md-4 col-sm-3 col-xs-6 product">
<a href="/40/128/cowboysbag-the-bag-black.html">
<img src="http://www.anniestasjes.nl/image_resizer.php//files/products/picture_128_1_5L4Ts18Qml.jpg?width=800&height=800&cropratio=1:1&image=/files/products/picture_128_1_5L4Ts18Qml.jpg" class="img-responsive" border="0">
<h4>Another Dynamite bag with a much longer title that will need to wrap</h4>
<div class="price">€ 129,95</div>
</a>
</div>
<div class="visible-xs-block clearfix"></div>
<div class="col-md-4 col-sm-3 col-xs-6 product">
<a href="/40/128/cowboysbag-the-bag-black.html">
<img src="http://www.anniestasjes.nl/image_resizer.php//files/products/picture_128_1_5L4Ts18Qml.jpg?width=800&height=800&cropratio=1:1&image=/files/products/picture_128_1_5L4Ts18Qml.jpg" class="img-responsive" border="0">
<h4>A hot handbag</h4>
<div class="price">€ 129,95</div>
</a>
</div>
<div class="visible-lg-block visible-md-block clearfix"></div>
<div class="col-md-4 col-sm-3 col-xs-6 product">
<a href="/40/128/cowboysbag-the-bag-black.html">
<img src="http://www.anniestasjes.nl/image_resizer.php//files/products/picture_128_1_5L4Ts18Qml.jpg?width=800&height=800&cropratio=1:1&image=/files/products/picture_128_1_5L4Ts18Qml.jpg" class="img-responsive" border="0">
<h4>I think I like the Green bag most</h4>
<div class="price">€ 129,95</div>
</a>
</div>
<div class="visible-sm-block visible-xs-block clearfix"></div>
<div class="col-md-4 col-sm-3 col-xs-6 product">
<a href="/40/128/cowboysbag-the-bag-black.html">
<img src="http://www.anniestasjes.nl/image_resizer.php//files/products/picture_128_1_5L4Ts18Qml.jpg?width=800&height=800&cropratio=1:1&image=/files/products/picture_128_1_5L4Ts18Qml.jpg" class="img-responsive" border="0">
<h4>I guess Tassen is Dutch for bag</h4>
<div class="price">€ 129,95</div>
</a>
</div>
<div class="col-md-4 col-sm-3 col-xs-6 product">
<a href="/40/128/cowboysbag-the-bag-black.html">
<img src="http://www.anniestasjes.nl/image_resizer.php//files/products/picture_128_1_5L4Ts18Qml.jpg?width=800&height=800&cropratio=1:1&image=/files/products/picture_128_1_5L4Ts18Qml.jpg" class="img-responsive" border="0">
<h4>In German, bag is Tasche oder Handtasche (handbag)</h4>
<div class="price">€ 129,95</div>
</a>
</div>
<div class="visible-lg-block visible-md-block visible-xs-block clearfix"></div>
<div class="col-md-4 col-sm-3 col-xs-6 product">
<a href="/40/128/cowboysbag-the-bag-black.html">
<img src="http://www.anniestasjes.nl/image_resizer.php//files/products/picture_128_1_5L4Ts18Qml.jpg?width=800&height=800&cropratio=1:1&image=/files/products/picture_128_1_5L4Ts18Qml.jpg" class="img-responsive" border="0">
<h4>This is another handbag</h4>
<div class="price">€ 129,95</div>
</a>
</div>
<div class="col-md-4 col-sm-3 col-xs-6 product">
<a href="/40/128/cowboysbag-the-bag-black.html">
<img src="http://www.anniestasjes.nl/image_resizer.php//files/products/picture_128_1_5L4Ts18Qml.jpg?width=800&height=800&cropratio=1:1&image=/files/products/picture_128_1_5L4Ts18Qml.jpg" class="img-responsive" border="0">
<h4>Yet another cool bag</h4>
<div class="price">€ 129,95</div>
</a>
</div>
<div class="visible-sm-block visible-xs-block clearfix"></div>
<div class="col-md-4 col-sm-3 col-xs-6 product">
<a href="/40/128/cowboysbag-the-bag-black.html">
<img src="http://www.anniestasjes.nl/image_resizer.php//files/products/picture_128_1_5L4Ts18Qml.jpg?width=800&height=800&cropratio=1:1&image=/files/products/picture_128_1_5L4Ts18Qml.jpg" class="img-responsive" border="0">
<h4>Cowboysbag 'The Bag' Black</h4>
<div class="price">€ 129,95</div>
</a>
</div>
</div> <!-- /row -->
</div> <!-- /container -->
If all of this is just too much markup for you, you can use jQuery instead to make the adjustments automatically as follows:
var row=$('.row');
$.each(row, function() {
var maxh=0;
$.each($(this).find('div[class^="col-"]'), function() {
if($(this).height() > maxh)
maxh=$(this).height();
});
$.each($(this).find('div[class^="col-"]'), function() {
$(this).height(maxh);
});
});
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments