Category Page: How to get it display like that...

[Some French Dude]

Here is my Category page: it displays the full posts, one after the other.

How can I get a visual display like this site:


This is what you get when you click their Category Page "Avis" in the main menu.

 

[Some French Dude]

@Alex, can you please advise?
Thank you.

 

[Alex]

You can set the loop settings of the category page to "teasers" and set the columns to 2, featured image above headline (MD > Site design > content to change all loops, or Posts > Categories > edit category > Loop to edit only one category.

From there, it looks like you will need a latest posts widget which I can release here as a drop-in for you. I made something similar for the upcoming MD.com redesign I can repackage for you too.

 

[Some French Dude]

You can set the loop settings of the category page to "teasers" and set the columns to 2.

This is how it looks after doing this:

And if you scroll down further, you find the other posts:

From there, it looks like you will need a latest posts widget which I can release here as a drop-in for you. I made something similar for the upcoming MD.com redesign I can repackage for you too.

Looking forward to it. Thanks.

----
Also, the layout looks kind of weird on the teasers on the Category page.
This is my post:

=> H1 is bigger than H2 is bigger than H3.

This is how the headings are displayed on the related teaser:


=> My H2 and H3 are displayed bigger than the H1.

 

[Alex]

In the loop settings change the "show full text" setting to only show an excerpt. You can also adjust typography in MD > Site design > fonts and typography

 

[Some French Dude]

@Alex , can you please advise. I'm stuck with the broken layout as shown on my previous screenshot.

I tested the several options of the the Loop several but it does not change anything.
Here are my tests:
TEST 1


TEST 2


The Layout remains the same on my Category page:

and if you scroll down, you get this:



How to get a normal layout, with the posts aligned?
How to get something looking like:

 

[Alex]

Check the Edit category settings on both of those pages. MD also offers settings on a per category page basis, so you may have changed the loop settings there on a past date. If those settings aren't filled out, your category pages would inherit the same layout as your screenshots.

 

[Some French Dude]

I changed went to edit the Category setting as you said, especially this:



Here is how it looks now:


As you can see, the blocks are not aligned top, as it would make sense for them to be. It comes from the fact that the Heading on the left-hand side post goes on 3 rows when the one for the right-hand side post goes on 2 rows.

Still, common sense would tend to say that they should still be aligned top, to get a clea design. This is the case on this other site I mentionned above, using a free theme:



How can I get the same result with MD, that is, clean, top-align Teaser blocks?

Generally speaking, don't you think the overall layout is missing a bit of "order" and proper alignement:



It's bit like you have misalignements everywhere, and it makes it awkward and hard for the eyes and brain to understand the "path". It adds cognitive overload.

 

[Alex]

As you can see, the blocks are not aligned top, as it would make sense for them to be. It comes from the fact that the Heading on the left-hand side post goes on 3 rows when the one for the right-hand side post goes on 2 rows.

This style of teasers was intentionally aligned to the middle to account for the box shadow design. If this design was aligned to the top, as you're suggesting, each white box that isn't aligned would have to add an empty gap to make up for any missing height.

If you want your teasers to resemble your screenshot and align them to the top you could use CSS like the following:

.loop-teasers .post-box { vertical-align: top; }

.style-default .blog-teaser {
    background-color: transparent;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}