# Aligning flexbox items

**URL:** <https://community.hubspot.com/t/aligning-flexbox-items/53877>\
**Category:** CMS Development\
**Tags:** css\
**Created:** [March 25, 2022, 8:37pm UTC](https://community.hubspot.com/t/aligning-flexbox-items/53877 "2022-03-25T20:37:36Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![EStratton](https://avatars.discourse-cdn.com/v4/letter/e/df788c/32.png) [@EStratton](https://community.hubspot.com/u/EStratton)\
**Post date:** [March 25, 2022, 8:37pm UTC](https://community.hubspot.com/t/aligning-flexbox-items/53877/1 "2022-03-25T20:37:36Z")

</div>

I’m working on redesigning a Related Posts section here:

> **[An Introduction to Mobile Home Park Investing](https://www.propertyradar.com/blog/introduction-on-mobile-home-park-investing)**
>
> Here's what you need to know about mobile home park investing including the pros vs. cons, the skills needed, and steps for acquiring valuable properties.

I’m having trouble getting the 3 items to flex horizontally instead of vertically, and I’d love any help/suggestions.  
Thanks!

 ![screencapture-propertyradar-blog-an-introduction-on-mobile-home-park-investing-2022-03-25-12_29_29.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/3X/f/8/f892353e4e669f75f4bb457e003157ce076cb5d5.jpeg)

---

<div class="post-metadata">

**Author:** ![system](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/system/32/124_2.png) [@system](https://community.hubspot.com/u/system)\
**Post date:** [March 28, 2022, 8:41am UTC](https://community.hubspot.com/t/aligning-flexbox-items/53877/2 "2022-03-28T08:41:12Z")

</div>

Hey @EStratton

Add this code in your module css it will work

.blog-related-posts\_\_post {  
flex-basis: 100%;  
margin: 0;  
}  
.blog-related-posts {  
display: flex;  
flex-wrap: wrap;  
}  
article.blog-related-posts\_\_post-wrapper {  
width: 33.33%;  
padding: 15px;  
box-sizing: border-box;  
}

@media screen and (max-width:991px){  
article.blog-related-posts\_\_post-wrapper {  
width: 50%;  
}  
}

@media screen and (max-width:567px){  
article.blog-related-posts\_\_post-wrapper {  
width: 100%;  
}  
}

Hope this helps! If we were able to answer your query, kindly help the community by marking it as a solution. Thanks and Regards.

---

<div class="post-metadata">

**Author:** ![EStratton](https://avatars.discourse-cdn.com/v4/letter/e/df788c/32.png) [@EStratton](https://community.hubspot.com/u/EStratton)\
**Post date:** [March 28, 2022, 4:56pm UTC](https://community.hubspot.com/t/aligning-flexbox-items/53877/3 "2022-03-28T16:56:30Z")

</div>

Hi, Chehak -  
That helped the layout - however, the images and cards disappeared. Can you help me get them back?  
Thank you!

 ![Screen Shot 2022-03-28 at 9.48.37 AM.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/f/d/fd63c5acd6dc0b630efb7c8f6cf27d339c27f73a.png)

---

<div class="post-metadata">

**Author:** ![system](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/system/32/124_2.png) [@system](https://community.hubspot.com/u/system)\
**Post date:** [March 29, 2022, 4:59am UTC](https://community.hubspot.com/t/aligning-flexbox-items/53877/4 "2022-03-29T04:59:55Z")

</div>

hey @EStratton

Add this code  
.blog-related-posts\_\_post-image {  
display: block;  
}