# CSS Flexbox issue Blog Listing Module

**URL:** <https://community.hubspot.com/t/css-flexbox-issue-blog-listing-module/40499>\
**Category:** CMS Development\
**Tags:** professional\
**Created:** [July 11, 2021, 6:59pm UTC](https://community.hubspot.com/t/css-flexbox-issue-blog-listing-module/40499 "2021-07-11T18:59:33Z")\
**Posts on this page:** 3\
**Page:** 1

<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:** [July 11, 2021, 6:59pm UTC](https://community.hubspot.com/t/css-flexbox-issue-blog-listing-module/40499/1 "2021-07-11T18:59:33Z")

</div>

Hi,

On the homepage of the url [https://www.wijsmetlocatie.nl/](https://www.wijsmetlocatie.nl/) I have a blog listing module, showing three cards of the latest three blog posts in a row. On screens smaller than 768px the three cards get stacked vertically. So far so good 🙂

When I in Chrome inspector I drag the screen width to a width between 768px and 823px the first row shows only two cards on the first row, and the third card on the second row. I really don’t understand this behaviour. I want all three cards in one row if the screen-width \> 767px.

My CSS for the conainer:

.bloglisting\_\_row--layout2 {  
display: flex;  
flex-wrap: wrap;

}

My CSS for the cards:

.bloglisting\_\_layout2 {  
background: #fff;  
box-shadow: 0 8px 20px 0 rgb(117 117 118 / 20%);  
flex: 0 0 32%;  
margin-right: 2%;  
min-height: 550px;

}

What am I doing wrong?

I know how to work with CSS (except in this case :-)) and a bit of HTML.

Thanks

Marco

---

<div class="post-metadata">

**Author:** ![Indra](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/indra/32/98381_2.png) [@Indra](https://community.hubspot.com/u/Indra)\
**Post date:** [July 12, 2021, 11:23am UTC](https://community.hubspot.com/t/css-flexbox-issue-blog-listing-module/40499/2 "2021-07-12T11:23:22Z")

</div>

Hi @Anonymous,

It’s because the length of your title it to long. The title ‘Proeftuin BGT **Mutatiesignalering** Kadaster’ will expend the column width to it will push your third item below.

Best is to add word-wrap and hyphens to your title like this:

```lia-code-sample
div.post-header.mb-10 h3 a {
 text-decoration: none;
 word-wrap: break-word;
 -ms-hyphens: auto;
 -moz-hyphens: auto;
 -webkit-hyphens: auto;
 hyphens: auto;
}

```

Please let me know if this helped.

---

<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:** [July 12, 2021, 8:35pm UTC](https://community.hubspot.com/t/css-flexbox-issue-blog-listing-module/40499/3 "2021-07-12T20:35:23Z")

</div>

Hi Indra,

Thank you so much for putting me on the right track!

Instead of [word-wrap: break-word] I applied [word-break: break-word]. The reason for this is that according to [https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens](https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens)Chrome doesn’t support hyphens for the Dutch language.

Marco