Joomla Tagged Blog of articles

Question

I managed to create a 2 column blog view of articles on a Joomla 3.9 website using the guidance in this post, along with some additional linked advice on adding a "readmore":

How to show tagged items in category blog layout

However, at the following link:

https://eume.upf.org/resources/tag-blog-test?start=40

It can be seen that a gap or empty space forms after certain articles.

This seems to happen if the article in the left column is longer than the one in the right column. For example, if the title on the left goes to 2 lines, whereas the one on the right only has 1 line. Then, the subsequent article which should be in the left column is shifted.

Does anyone have an idea as to how I could fix this problem?

Answer 1

This looks similar to https://stackoverflow.com/questions/28025204/joomla-category-blog-view-different-height-on-articles but I have no idea how that solution would work.

The easiest, quickest and dirtiest workaround for this is to add a min-height css declaration on the divs:

.question-page .form-inline > div {
    min-height: 300px;
}

But this will break when the titles are longer than 2 or 3 rows.

The more technical approach is to use Flex, like so: (Assumed that having followed the guide above, you can modify CSS.)

.question-page .form-inline {
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    flex-basis: 1 0 50%; /% possibly not needed as blocks are set at 40% */
    flex-wrap: wrap; 
}
.question-page .form-inline > div {
    flex-wrap: wrap; /* this shouldn't be needed but made it all work for me */
    margin-bottom: 30px /* optional to add space between */
}

But, with the above styles we break the pagination limiter above the content, so you'll need to take care of that:

.question-page .form-inline .filters {
    display: flex;
    flex-flow: column;
    flex: 1 0 100%;
}
.question-page .form-inline .filters > div {
    align-self: right;
}

Not a perfect solution but should get you what you're looking for.