CSS Flexbox issue Blog Listing Module

SOLVE
MDeveloper
Participant | Diamond Partner

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 🙂

 

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

 

 

0 Upvotes
1 Accepted solution

Accepted Solutions
Indra
Solution
Top Contributor | Diamond Partner

Hi @MDeveloper,

 

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.


Bureau Vet

Did my post solve your question? Help the community by marking it as a solution

View solution in original post

2 Replies 2
Indra
Solution
Top Contributor | Diamond Partner

Hi @MDeveloper,

 

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.


Bureau Vet

Did my post solve your question? Help the community by marking it as a solution

View solution in original post

MDeveloper
Participant | Diamond Partner

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

 

 

 

 

0 Upvotes