Hey there! I'm currently experimenting with a simple product grid for testing purposes only. It's not a final design, just trying to work out some kinks. One issue I'm facing is with the heights of the elements. When text spans over two lines, the layout breaks. I've tried looking for solutions online but couldn't find anything helpful. Initially, I thought it was because of the image.
If you want to see an example, check it out here: http://jsfiddle.net/pp6L8/9/
HTML:
<section class="shop-grid">
<div class="container">
<section class="col-group">
<article class="col-3">
<div class="item-container ">
... (content continues)
</div>
</article>
... (more article sections)
</section>
</section>
CSS:
body {
font-family: 'Open Sans', sans-serif;
font-weight: normal;
}
.product-name {
margin: 20px 0;
padding: 0;
}
... (CSS rules continue)