CMS Development

Anonymous
Não aplicável

CSS Flexbox issue Blog Listing Module

resolver

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 Avaliação positiva
1 Solução aceita
Indra
Solução
Orientador(a) | Parceiro Elite
Orientador(a) | Parceiro Elite

CSS Flexbox issue Blog Listing Module

resolver

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.


Vet Digital - The Growth Agency | HubSpot Solutions Partner Agency

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

Exibir solução no post original

2 Respostas 2
Anonymous
Não aplicável

CSS Flexbox issue Blog Listing Module

resolver

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 Avaliação positiva
Indra
Solução
Orientador(a) | Parceiro Elite
Orientador(a) | Parceiro Elite

CSS Flexbox issue Blog Listing Module

resolver

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.


Vet Digital - The Growth Agency | HubSpot Solutions Partner Agency

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