# Not Aligning Properly: Post-Listing / Post-Item

**URL:** <https://community.hubspot.com/t/not-aligning-properly-post-listing-post-item/9232>\
**Category:** CMS Development\
**Created:** [June 22, 2018, 4:40pm UTC](https://community.hubspot.com/t/not-aligning-properly-post-listing-post-item/9232 "2018-06-22T16:40:30Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![nickng](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/nickng/32/61905_2.png) [@nickng](https://community.hubspot.com/u/nickng)\
**Post date:** [June 22, 2018, 4:40pm UTC](https://community.hubspot.com/t/not-aligning-properly-post-listing-post-item/9232/1 "2018-06-22T16:40:30Z")

</div>

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

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

 ![landing-grid-off.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/3X/5/a/5a2df8b862765e8c37d14e9be9809328fa686ea7.jpeg)  
“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)

 ![landing-grid-height.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/3X/d/d/ddaeca9df590cfe99e787efdef9ed003754e5ec2.jpeg)

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!

---

<div class="post-metadata">

**Author:** ![tjoyce](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tjoyce/32/88832_2.png) [@tjoyce](https://community.hubspot.com/u/tjoyce)\
**Post date:** [June 22, 2018, 5:43pm UTC](https://community.hubspot.com/t/not-aligning-properly-post-listing-post-item/9232/2 "2018-06-22T17:43:43Z")

</div>

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

 ![kinda.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/3X/5/a/5aa24063c9d0d67a42012170a2fc19c5e952786e.jpeg)

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.

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

```

* * *

[tim@belch.io](mailto:tim@belch.io)

---

<div class="post-metadata">

**Author:** ![nickng](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/nickng/32/61905_2.png) [@nickng](https://community.hubspot.com/u/nickng)\
**Post date:** [June 22, 2018, 7:22pm UTC](https://community.hubspot.com/t/not-aligning-properly-post-listing-post-item/9232/3 "2018-06-22T19:22:48Z")

</div>

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

 ![landing-grid-clearfix.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/3X/4/0/409f33c1b7b100f12209436bff20c1cfdce99042.jpeg)

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:

 ![Screen Shot 2018-06-22 at 2.20.42 PM.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/0/2/029ca3116bc4c29c20a9699c549c95933c1f6ed7.png)

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

---

<div class="post-metadata">

**Author:** ![tjoyce](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tjoyce/32/88832_2.png) [@tjoyce](https://community.hubspot.com/u/tjoyce)\
**Post date:** [June 22, 2018, 7:50pm UTC](https://community.hubspot.com/t/not-aligning-properly-post-listing-post-item/9232/4 "2018-06-22T19:50:26Z")

</div>

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](mailto:tim@belch.io)

---

<div class="post-metadata">

**Author:** ![nickng](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/nickng/32/61905_2.png) [@nickng](https://community.hubspot.com/u/nickng)\
**Post date:** [June 22, 2018, 8:24pm UTC](https://community.hubspot.com/t/not-aligning-properly-post-listing-post-item/9232/5 "2018-06-22T20:24:03Z")

</div>

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