CSS Flexbox issue Blog Listing Module

Develop, Build & Integrate CMS Development
1

Hi,

On the homepage of the url 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 :slightly_smiling_face:

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

2

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:

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.

3

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 Chrome doesn’t support hyphens for the Dutch language.

Marco