(I know that this problem is well-documented in many instances, but I can't seem to find a work-around in my case.)
The problem is that flexbox elements toward the bottom of the page have insufficient height - presumably because the images inside those elements are loading slowly.
Here's an example: http://paleomagazine.com/paleo-websites-bloggers/
If you scroll down to the 3rd or 4th row of that page, you'll see that the elements are smushed together because of insufficient height.
I'm including my code below, but as a preface, I've tried to do a number of things through CSS and JS, including (a) using CSS transform and (b) trying to force a JS redraw (changing display, offsetHeight, and even webkitTransform). None of this has worked (and if you check the page, you can see that it's still implemented for the moment).
.custom-cat1 section.bSe {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.custom-cat1 section.bSe article.no-flex {
flex-basis: 100%;
margin-bottom: 0;
}
.custom-cat1 section.bSe article.gdl {
flex-basis: 30%;
margin: 1rem .4rem;
box-shadow: 0 0 6px rgba(0, 0, 0, .2);
}
.custom-cat1 section.bSe article.gdl .recipe-link-cover {
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-pack: justify;
justify-content: space-between;
height: 100%;
}
.custom-cat1 .bSe article .awr {
border: none;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-pack: justify;
height: 100%;
padding-bottom: 15px;
}
.custom-cat1 .gdl h2.entry-title {
font-size: 1.2em !important;
margin-top: 0 !important;
color: #444444;
}
.custom-cat1 .bSe article img {
width: 100%;
height: auto;
box-sizing: border-box;
max-width: 100%;
margin: 0 auto 10px auto;
overflow: visible;
}
.custom-cat1 .bSe article img:hover,
.custom-cat1 .gdl h2.entry-title:hover {
opacity: 0.8;
transform: scale(1.04);
}
.custom-cat1 .bSe article .awr p {
margin: 0 !important;
line-height: 1.1em !important;
}<div class="wrp cnt gin custom-cat1">
<section class="bSe fullWidth">
<article class="no-flex">
<p id="breadcrumbs"><span xmlns:v="http://rdf.data-vocabulary.org/#"><span typeof="v:Breadcrumb"><a href="http://paleomagazine.com/" rel="v:url" property="v:title">Home</a> » <span rel="v:child" typeof="v:Breadcrumb"><a href="http://paleomagazine.com/paleo-diet/" rel="v:url" property="v:title">Paleo Diet</a> » <strong class="breadcrumb_last">Paleo Websites and Bloggers</strong></span></span></span></p>
<div class="category-title">
<h1><span>Paleo Websites and Bloggers</span></h1>
</div>
<div class="subheader-optin">
<p>Ready to Get Started? <a><span class="tve-leads-two-step-trigger tl-2step-trigger-25517" style="display: inline;">Get Our Free 4-Week Paleo Meal Plan</span></a></p>
</div>
</article>
<article class="gdl left" style="height: 450px;">
<div class="awr">
<h2 class="entry-title"><a href="http://paleomagazine.com/blogger-spotlight-eileen-laird">Blogger Spotlight – Eileen Laird</a></h2>
<a href="http://paleomagazine.com/blogger-spotlight-eileen-laird"><img class="fwI" width="730" height="611" src="http://paleomagazine.com/wp-content/uploads/2016/02/Blogger-Spotlight-–-Eileen-Laird.jpg" alt="Blogger Spotlight – Eileen Laird" title="Blogger Spotlight – Eileen Laird"></a>
<p>Eileen Laird is the founder of Phoenix Helix and author of A Simple Guide to the Paleo Autoimmune... <a href="http://paleomagazine.com/blogger-spotlight-eileen-laird">more</a></p>
</div>
</article>
<div class="spr"></div>
<article class="gdl left" style="height: 450px;">
<div class="awr">
<h2 class="entry-title"><a href="http://paleomagazine.com/blogger-spotlight-kaylie-johnson">Blogger Spotlight – Kaylie Johnson</a></h2>
<a href="http://paleomagazine.com/blogger-spotlight-kaylie-johnson"><img class="fwI" width="730" height="611" src="http://paleomagazine.com/wp-content/uploads/2016/02/Blogger-Spotlight-Kaylie-Johnson.jpg" alt="Blogger Spotlight - Kaylie Johnson" title="Blogger Spotlight - Kaylie Johnson"></a>
<p>Kaylie Johnson is the founder of Joyful Bite, where she shares her Paleo journey and amazing... <a href="http://paleomagazine.com/blogger-spotlight-kaylie-johnson">more</a></p>
</div>
</article>
<div class="spr"></div>
<article class="gdl left" style="height: 450px;">
<div class="awr">
<h2 class="entry-title"><a href="http://paleomagazine.com/paleo-blogger-stefani-ruper">Blogger Spotlight – Stefani Ruper</a></h2>
<a href="http://paleomagazine.com/paleo-blogger-stefani-ruper"><img class="fwI" width="630" height="528" src="http://paleomagazine.com/wp-content/uploads/2015/12/Blogger-Spotlight-Stefani-Ruper.jpg" alt="Blogger Spotlight - Stefani Ruper" title="Blogger Spotlight - Stefani Ruper"></a>
<p>1. What got you interested in the Paleo lifestyle? Back in 2009, I was a vegetarian on the verge of... <a href="http://paleomagazine.com/paleo-blogger-stefani-ruper">more</a></p>
</div>
</article>
<div class="spr"></div>
<article class="gdl left" style="height: 480px;">
<div class="awr">
<h2 class="entry-title"><a href="http://paleomagazine.com/paleo-blogger-mark-sisson">Blogger Spotlight – Mark Sisson</a></h2>
<a href="http://paleomagazine.com/paleo-blogger-mark-sisson"><img class="fwI" width="630" height="528" src="http://paleomagazine.com/wp-content/uploads/2015/10/Blogger-Spotlight-Mark-Sisson.jpg" alt="Blogger Spotlight - Mark Sisson" title="Blogger Spotlight - Mark Sisson"></a>
<p>1. What got you interested in the Paleo lifestyle? I was going through a major reevaluation of my... <a href="http://paleomagazine.com/paleo-blogger-mark-sisson">more</a></p>
</div>
</article>
<div class="spr"></div>
<article class="gdl left" style="height: 480px;">
<div class="awr">
<h2 class="entry-title"><a href="http://paleomagazine.com/paleo-blogger-sarah-pope">Blogger Spotlight – Sarah Pope</a></h2>
<a href="http://paleomagazine.com/paleo-blogger-sarah-pope"><img class="fwI" width="630" height="528" src="http://paleomagazine.com/wp-content/uploads/2015/12/Blogger-Spotlight-Sarah-Pope.jpg" alt="Blogger Spotlight - Sarah Pope" title="Blogger Spotlight - Sarah Pope"></a>
<p>1. What got you interested in the whole foods lifestyle? The first big motivator was my... <a href="http://paleomagazine.com/paleo-blogger-sarah-pope">more</a></p>
</div>
</article>
<div class="spr"></div>
<article class="gdl left" style="height: 480px;">
<div class="awr">
<h2 class="entry-title"><a href="http://paleomagazine.com/paleo-restaurant-feature-shine-colorado">Paleo Restaurant Feature: Shine Restaurant & Gathering Place</a></h2>
<a href="http://paleomagazine.com/paleo-restaurant-feature-shine-colorado"><img class="fwI" width="730" height="611" src="http://paleomagazine.com/wp-content/uploads/2015/11/Paleo-Restaurant-Feature-Shine-Restaurant-Gathering-Place1.jpg" alt="Paleo Restaurant Feature: Shine Restaurant & Gathering Place" title="Paleo Restaurant Feature: Shine Restaurant & Gathering Place"></a>
<p>Shine Restaurant & Gathering Place in Boulder Colorado is owned by triplet sisters, Jennifer,... <a href="http://paleomagazine.com/paleo-restaurant-feature-shine-colorado">more</a></p>
</div>
</article>
<div class="spr"></div>
<article class="gdl left" style="height: 450px;">
<div class="awr">
<h2 class="entry-title"><a href="http://paleomagazine.com/blogger-spotlight-leslie-auman">Blogger Spotlight – Leslie Auman</a></h2>
<a href="http://paleomagazine.com/blogger-spotlight-leslie-auman"><img class="fwI" width="630" height="528" src="http://paleomagazine.com/wp-content/uploads/2015/08/Leslie-Auman.jpg" alt="Blogger Spotlight - Leslie Auman" title="Blogger Spotlight - Leslie Auman"></a>
<p>Leslie Auman is the owner and founder of The Whole Life Balance. You can follow her on Instagram,... <a href="http://paleomagazine.com/blogger-spotlight-leslie-auman">more</a></p>
</div>
</article>
<div class="spr"></div>
<article class="gdl left" style="height: 450px;">
<div class="awr">
<h2 class="entry-title"><a href="http://paleomagazine.com/blogger-spotlight-jessica-furniss">Blogger Spotlight – Jessica Furniss</a></h2>
<a href="http://paleomagazine.com/blogger-spotlight-jessica-furniss"><img class="fwI" width="630" height="528" src="http://paleomagazine.com/wp-content/uploads/2015/08/Blogger-Spotlight-Jessica-Furniss.jpg" alt="Blogger Spotlight - Jessica Furniss" title="Blogger Spotlight - Jessica Furniss"></a>
<p>Jessica Furniss is the author behind Spiffy Eats & Giggle Water. You can follow her on... <a href="http://paleomagazine.com/blogger-spotlight-jessica-furniss">more</a></p>
</div>
</article>
<div class="spr"></div>
<article class="gdl left" style="height: 450px;">
<div class="awr">
<h2 class="entry-title"><a href="http://paleomagazine.com/blogger-spotlight-ainsley-daschofsky">Blogger Spotlight – Ainsley Daschofsky</a></h2>
<a href="http://paleomagazine.com/blogger-spotlight-ainsley-daschofsky"><img class="fwI" width="730" height="611" src="http://paleomagazine.com/wp-content/uploads/2015/09/Blogger-Spotlight-–-Ainsley-Daschofsky.jpg" alt="Blogger Spotlight - Ainsley Daschofsky" title="Blogger Spotlight – Ainsley Daschofsky"></a>
<p>1. What got you interested in the Paleo lifestyle? Oddly, the life train stopped at the low carb... <a href="http://paleomagazine.com/blogger-spotlight-ainsley-daschofsky">more</a></p>
</div>
</article>
<div class="spr"></div>
<article class="gdl left" style="height: 220px;">
<div class="awr">
<h2 class="entry-title"><a href="http://paleomagazine.com/paleo-blogger-chris-kresser">Blogger Spotlight – Chris Kresser</a></h2>
<a href="http://paleomagazine.com/paleo-blogger-chris-kresser"><img class="fwI" width="630" height="528" src="http://paleomagazine.com/wp-content/uploads/2015/09/Blogger-Spotlight-Chris-Kresser.jpg" alt="Blogger Spotlight - Chris Kresser" title="Blogger Spotlight - Chris Kresser"></a>
<p>1. What got you interested in the Paleo lifestyle? I suffered from a decade-long, debilitating... <a href="http://paleomagazine.com/paleo-blogger-chris-kresser">more</a></p>
</div>
</article>
<div class="spr"></div>
<article class="gdl left" style="height: 220px;">
<div class="awr">
<h2 class="entry-title"><a href="http://paleomagazine.com/blogger-spotlight-mary-herrington">Blogger Spotlight – Mary Herrington</a></h2>
<a href="http://paleomagazine.com/blogger-spotlight-mary-herrington"><img class="fwI" width="630" height="528" src="http://paleomagazine.com/wp-content/uploads/2015/07/Blogger-Spotlight-Mary-Herrington.jpg" alt="Blogger Spotlight – Mary Herrington" title="Blogger Spotlight – Mary Herrington"></a>
<p>1. What got you interested in the Paleo lifestyle? What got me interested in the Paleo lifestyle is... <a href="http://paleomagazine.com/blogger-spotlight-mary-herrington">more</a></p>
</div>
</article>
<div class="spr"></div>
<article class="gdl left" style="height: 220px;">
<div class="awr">
<h2 class="entry-title"><a href="http://paleomagazine.com/blogger-spotlight-danielle-gagnon">Blogger Spotlight – Danielle Gagnon</a></h2>
<a href="http://paleomagazine.com/blogger-spotlight-danielle-gagnon"><img class="fwI" width="630" height="528" src="http://paleomagazine.com/wp-content/uploads/2015/07/Blogger-Spotlight-Danielle-Gagnon.jpg" alt="Blogger Spotlight - Danielle Gagnon" title="Blogger Spotlight - Danielle Gagnon"></a>
<p>1. What got you interested in the Paleo lifestyle? I spent most of my college and post-grad years... <a href="http://paleomagazine.com/blogger-spotlight-danielle-gagnon">more</a></p>
</div>
</article>
<div class="spr"></div>
<article class="gdl left" style="height: 220px;">
<div class="awr">
<h2 class="entry-title"><a href="http://paleomagazine.com/natures-palette-for-perfect-health">Nature’s Palette for Perfect Health</a></h2>
<a href="http://paleomagazine.com/natures-palette-for-perfect-health"><img class="fwI" width="630" height="528" src="http://paleomagazine.com/wp-content/uploads/2015/07/Natures-Palette-for-Perfect-Health.jpg" alt="Nature's Palette for Perfect Health" title="Nature's Palette for Perfect Health"></a>
<p>Jayson Calton, PhD and Mira Calton, CN are the founders of Calton Nutrition and the authors of... <a href="http://paleomagazine.com/natures-palette-for-perfect-health">more</a></p>
</div>
</article>
<div class="spr"></div>
<article class="gdl left" style="height: 220px;">
<div class="awr">
<h2 class="entry-title"><a href="http://paleomagazine.com/interview-with-george-bryant">Interview with George Bryant – Civilized Caveman</a></h2>
<a href="http://paleomagazine.com/interview-with-george-bryant"><img class="fwI" width="630" height="528" src="http://paleomagazine.com/wp-content/uploads/2015/04/george-bryant-featured-image.jpg" alt="george bryant featured image" title="george bryant featured image"></a>
<p>George Bryant of Civilized Caveman is one of our favorite people in Paleo – he’s... <a href="http://paleomagazine.com/interview-with-george-bryant">more</a></p>
</div>
</article>
<div class="spr"></div>
<article class="gdl left" style="height: 220px;">
<div class="awr">
<h2 class="entry-title"><a href="http://paleomagazine.com/paleo-blogger-empowered-sustenance">Favorite Bloggers: Empowered Sustenance</a></h2>
<a href="http://paleomagazine.com/paleo-blogger-empowered-sustenance"><img class="fwI" width="630" height="630" src="http://paleomagazine.com/wp-content/uploads/2014/12/lauren-geertsen.jpg" alt="lauren geertsen - empowered sustenance" title="lauren geertsen - empowered sustenance"></a>
<p>The Blog Empowered Sustenance The Blogger Lauren Geertsen Her Story Lauren, although still very... <a href="http://paleomagazine.com/paleo-blogger-empowered-sustenance">more</a></p>
</div>
</article>
<div class="spr"></div>
<div class="clear"></div>
<div class="awr ctr pgn">
<span class="page-numbers current">1</span>
<a class="page-numbers" href="http://paleomagazine.com/paleo-websites-bloggers/page/2/">2</a>
<a class="next page-numbers" href="http://paleomagazine.com/paleo-websites-bloggers/page/2/">Next »</a>
</div>
<div class="bspr"></div>
<div class="clear" style="width: 100%; height: 1px; margin: 0;"></div>
<div class="custom-category-description"></div>
<div class="clear" style="width: 100%; height: 1px; margin: 0;"></div>
<div class="category-page-bottom-optins">
<div>
<a target="_blank" onclick="ga('send', 'event', 'Category Bottom Optin', 'Click', '7-Day Challenge', {'nonInteraction': 1});">
<span class="tve-leads-two-step-trigger tl-2step-trigger-25371" style="display: inline;"><img src="http://paleomagazine.com/wp-content/uploads/2015/09/challenge-optin.jpeg" height="300" width="300"></span>
</a>
<img alt="GA Pixel" width="0" height="0" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" onload="ga('send', 'event', 'Category Bottom Optin', 'Impression', '7-Day Challenge', {'nonInteraction': 1});">
</div>
<div>
<a target="_blank" onclick="ga('send', 'event', 'Category Bottom Optin', 'Click', 'Favorite 11 Recipes', {'nonInteraction': 1});"><span class="tve-leads-two-step-trigger tl-2step-trigger-16874" style="display: inline;"><img src="http://paleomagazine.com/wp-content/uploads/2015/09/favorite-paleo-recipes.jpg" height="300" width="300"></span></a>
<img alt="GA Pixel" width="0" height="0" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" onload="ga('send', 'event', 'Category Bottom Optin', 'Impression', 'Favorite 11 Recipes', {'nonInteraction': 1});">
</div>
<div>
<a target="_blank" onclick="ga('send', 'event', 'Category Bottom Optin', 'Click', 'Meal Plan', {'nonInteraction': 1});"><span class="tve-leads-two-step-trigger tl-2step-trigger-25517" style="display: inline;"><img src="http://paleomagazine.com/wp-content/uploads/2015/09/meal-plan-optin.jpeg" height="300" width="300"></span></a>
<img alt="GA Pixel" width="0" height="0" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" onload="ga('send', 'event', 'Category Bottom Optin', 'Impression', 'Meal Plan', {'nonInteraction': 1});">
</div>
</div>
</section>
</div>Any help or suggestions here is greatly appreciated.
