Take a look at this screenshot of a thumbnail grid. I need to reposition the gray border so that it sits below the price and is consistently aligned across all products. The challenge arises when product titles vary in length, causing the price to be positioned differently for each product. My goal is to have the border consistently placed below line 3 for all products.
Below is the html.erb code snippet:
<div class="center">
<div class="row">
<% @listings.each do |listing| %>
<div class="col-md-3 col-xs-6">
<div class="thumbnail" >
<%= link_to image_tag(listing.image.url(:medium), class: "img-responsive aspect"), listing %>
</div>
<div class="caption">
<h3><%= listing.name %></h3>
<p><%= number_to_currency(listing.price) %></p>
</div>
</div>
<% end %>
</div>
</div>
This is how I styled it with css: It's tricky to get the border-bottom to align consistently after moving it from the thumbnail class to the caption class due to the varying lengths of product titles.
.thumbnail
{
display: block;
width: 100%;
position: relative;
height: 0;
padding: 80% 0 0 0;
overflow: hidden;
border: none;
border-bottom: 1px solid lightgray;
}
img
{
position: absolute;
display: block;
max-width: 100%;
max-height: 100%;
left: 0;
right: 0;
top: 3px;
bottom: 5px;
}
.caption {
h3 {
font-size: 17px;
margin: 2px;
}
p {
font-size: 15px;
margin: 0px;
}
position: relative;
top: -10px;
}