I am currently working on improving the column layout of a website. However, I am facing an issue where there are large blank spaces if the text lengths or image sizes vary. To test out the theme, I have included some sample products in the image below.
https://i.sstatic.net/Ea9yx.jpg
I am struggling to align the items properly using the following HTML loop for fetching products:
<div class="container-fluid lg-container">
<div class="row">
<div class="container-fluid">
{bundle = filter(pages, 'product') }
<div class="row row-body row-margin-bottom no-padding">
{ foreach item in bundle }
<div class="col-xs-12 col-sm-6 col-md-4" data-category="view">
<div class="lib-panel">
<div class="lib-header">
<a href="#">{{ item.title }}</a>
</div>
<div class="row xsm-catpad ">
<a href="{ item.url }" >
<img src="http://xpenology.org/wp-content/themes/qaengine/img/default-thumbnail.jpg" class="lib-img-show img-responsive" />
</a>
<div class="lib-desc">
<p{ item.content }...</p>
</div>
<div class="col-xs-12">
<a href="{{ item.url }}" title="{{ item.meta.title }}"><button class="btn christmas">Check it out</button></a>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</section>
</div><!-- /.row -->
</div>
Below is some CSS code that I have used, which might need some tweaking as it's a lengthy file:
.row-body
{
padding: 0;
margin: 0px;
}
.lib-panel {
margin-bottom: 20Px;
}
.lib-panel img {
width: auto;
background-color: transparent;
}
#md-img{
width: auto;
}
.lib-panel .row,
.lib-panel .col-md-6 .col-sm-6 .col-sm-4 .col-md-4 .col-sm-3 .col-md-3{
padding: 0;
}
.lib-panel .lib-wide-row {
padding: 0 0 0 0;
}
.lib-panel .lib-header {
text-align: center;
font-size: 20px;
padding: 10px 5px 0 5px;
}
@media (max-width: 768px) and (min-width: 300px) {
.lib-panel .lib-header {
font-size: 40px;
}
.row .row .xsm-catpad{
width: 80%;
margin: auto;
}
body {padding-bottom: 125px;}
}
.lib-panel .lib-row.lib-mini-header {
text-align: justify;
font-size: 16px;
padding: 5px 0px 0 0px;
}
.lib-panel .lib-row.lib-ad-header {
text-align: left;
font-size: 16px;
padding: 5px 0px 0 0px;
}
.lib-panel .lib-row.lib-desc {
position: relative;
height: 100%;
display: block;
font-size: 12px;
}
.lib-desc p{
font-size: 14px;
text-align: justify;
}
.lib-panel .lib-wide-row.lib-wide-desc {
height: 100%;
font-size: 12px;
}
.lib-panel .lib-row.lib-desc a{
position: absolute;
width: 100%;
bottom: 10px;
left: 20px;
}
.row .row .xsm-catpad{
width: 80%;
margin: auto;
}