Got a loop going in a grid formation. 3 posts per row, per category. Using bootstrap to create the layout. At full width it's working and how intended, however it's not responsive. Any ideas what I got wrong here?
Full Width https://www.dropbox.com/s/x77wxxp5gmtdrs9/Screenshot%202017-06-20%2017.28.31.png?dl=0
Reduced Width (not responsive) https://www.dropbox.com/s/01baalrm3u1fybe/Screenshot%202017-06-20%2017.32.42.png?dl=0
Edited Outputted html and css (written in sass originally).
#blog-section {
padding: 53px 0
}
#blog-section h1,
#blog-section h2,
#blog-section h3,
#blog-section h4,
#blog-section h5,
#blog-section h6,
#blog-section a {
padding: 20px 0 10px 0;
-ms-word-wrap: break-word;
word-wrap: break-word
}
#blog-section h1 {
color: #72b466;
font-size: 30px;
line-height: 35px;
margin-bottom: 23px;
padding-bottom: 22px;
display: block;
font-family: 'PT Sans Narrow', sans-serif;
font-weight: 400;
border-bottom: 2px solid #ddd
}
#blog-section h2 {
font-size: 22px;
text-align: center;
line-height: 28px;
font-family: 'Roboto Slab', serif;
font-weight: 400;
margin-bottom: 12px
}
#blog-section h3 {
font-size: 28px;
text-align: center;
line-height: 28px;
font-family: 'Roboto Slab', serif;
font-weight: 400;
margin-bottom: 12px
}
#blog-section .blog-image {
width: 300px;
height: auto
}
#blog-section p {
font-size: 14px;
font-weight: 500px
}
#blog-section .blog-image {
margin: 0 auto
}
#blog-section a {
color: inherit;
text-decoration: none !important
}
#blog-section .shortlink {
color: crimson
}
#blog-section .custom-border {
padding: 10px;
margin-bottom: 20px
}
#blog-section .btn-home {
padding: 20px;
margin-bottom: 20px;
border-radius: 5px
}
#blog-section .btn-list {
padding: 20px;
margin-bottom: 10px;
border-radius: 5px
}
#blog-section .row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
#blog-section .grid-loop {
border: 1px solid #ddd;
background-color: rgba(86, 61, 124, 0.15);
height: 100%;
padding: 10px;
border: 2px solid gray
}<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<section id="blog-section">
<div class="container my-container">
<div class="row row-eq-height">
<div class="col-xs-12 col-md-4">
<div class="grid-loop">
<div class="custom-border">
<a class="perm_link" href="http://localhost/certified-compostable-products/">
<h2>Certified Compostable Products</h2>
<div class="blog-image image-responsive"><img width="251" height="250" src="http://img.dummy-image-generator.com/abstract/dummy-251x250-DesiccationCracks.jpg" class="attachment-img-251x250 wp-post-image" alt="image4" /></div>
</a>
<p>
<p> PLEASE NOTE: We ALWAYS recommend that businesses replace disposable products with reusable ones. Waste reduction is the best way to handle your waste, followed by recycling and composting. Is there a way for you to stop using straws
altogether, rather than looking for a compostable straw? Or coffee cup? Or plate? That’s the goal. […]</p>
</p>
<span class="shortlink">
<button class="btn btn-success"><a rel="shortlink" href="http://localhost/?p=2382" title="Certified Compostable Products">Read More</a></button>
</span>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4">
<div class="grid-loop">
<div class="custom-border">
<a class="perm_link" href="http://localhost/importance-of-signage/">
<h2>Importance of Signage</h2>
<div class="blog-image image-responsive"><img width="251" height="250" src="http://img.dummy-image-generator.com/abstract/dummy-251x250-DesiccationCracks.jpg" class="attachment-img-251x250 wp-post-image" alt="image3" /></div>
</a>
<p>
<p>You may have read the title of this post and thought: “Everyone knows how to recycle, do I really need to put up signs?” Yes you do! It’s very, very important, and it’s the law!. Most people know, or think they know, the basics of recycling,
but when they are standing in front of three […]</p>
</p>
<span class="shortlink">
<button class="btn btn-success"><a rel="shortlink" href="http://localhost/?p=2372" title="Importance of Signage">Read More</a></button>
</span>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4">
<div class="grid-loop">
<div class="custom-border">
<a class="perm_link" href="http://localhost/nycs-commercial-recycling-laws/">
<h2>NYC’s Commercial Recycling Laws</h2>
<div class="blog-image image-responsive"><img width="251" height="250" src="http://img.dummy-image-generator.com/abstract/dummy-251x250-DesiccationCracks.jpg" class="attachment-img-251x250 wp-post-image" alt="image1" /></div>
</a>
<p>
<p>NYC’s commercial recycling laws are hard to keep up with and key information is often difficult to find. Don’t stress! We’ll help you stay up to date and in compliance. The most recent official notice regarding commercial recycling rules
in NYC was released by the NYC Department of Sanitation on February 5, 2016. Link to […]</p>
</p>
<span class="shortlink">
<button class="btn btn-success"><a rel="shortlink" href="http://localhost/?p=2356" title="NYC’s Commercial Recycling Laws">Read More</a></button>
</span>
</div>
</div>
</div>
</div>
<!--/.row-->
<div class="clearfix"></div>
</div>
<!--/.container-->
</section>
</html></div>
