Not Aligning Properly: Post-Listing / Post-Item

[nickng]

We’re customizing a blog template (currently, our live, working version), and on desktop, the posts align properly in grid-like fashion.

However, when viewing in tablet devices, it breaks like this:

“Eastern Vs. Western…” post on the right column when it should be on the left column

So, we figured that it might be a spacing issue, we experimented and set height property of .post-item, which relocated the Eastern Versus Western… post back to the left column (see image)

However, visually, it’s preferred not to resort to setting a fixed height property, and allow each post content in the header to define the height responsively.

With that said, what can we do to fix the alignment of posts? Appreciated any help or guidance to the right resources / tutorials. Thanks!

[tjoyce]

It actually only works on desktop in certain scenarios right now. See the image below.

You just happen to have the right combination of title lengths working in the right order. That’s fine, until you add your next post with a longer title. What you should do is add a clearing div after every other post. Drop this js somewhere in your page.

$(function(){
 $('.post-item').each(function(i,v){
 if(i % 2 == 0){
 $('<div class="clearfix"> </div>').insertAfter($(this));
 }
 });
});

---

tim@belch.io

[nickng]

@tjoyce Appreciate the clearfix solution. It solved that issue; however, it creates another issue (see image below).

From what I’m looking in the inspector, it looks like the first post / .post-item is singled out while the subsequent posts are grouped. For example:

Is this something I can modify in the JS script shared in the previous post?

[tjoyce]

The clearfix solution didn’t cause that problem. It definitely existed while I was looking at your site on specific screen sizes. To be blunt, that issue is caused by outdated html/css markup (having margins set in pixels and a max-width of 45.5% doesn’t really leave you with an even calculation on some screen sizes and causes your blocks to wrap since 45.5% of the width of their parent plus a fixed 40 pixel margin is greater than 100%). You really should consider having those post-item elements redeveloped. Hope that makes sense

---

tim@belch.io

[nickng]

@tjoyce Appreciate your bluntness and taking the time to look at our issues. We’ll review the post-item elements.