little css problem on the Frontpage

Thanks again for sharing your code in the other post.

Since some posts have longer excerpts, you want to use CSS that will make the other post share the same height. This is possible with flexbox and that’s how I achieve this look on the Compete Themes blog.

Here’s the CSS you can use to create an even two column layout:

@media all and (min-width: 800px) {

.loop-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
.blog .entry,
.archive .entry,
.search .entry {
  width: 48%;
  float: left;
}
.blog .entry:nth-child(odd),
.archive .entry:nth-child(odd),
.search .entry:nth-child(odd) {
  margin-right: 4%;
}
}

Flexbox will automatically make the posts the same height if one is taller which is really neat.

Thank you for the support. Works.

But in my screenshot you see the last row? the row is still set incorrectly after inserting the CSS. Any idea?

I can’t say for certain without seeing the CSS live on the site. This part here should address that issue:

.blog .entry:nth-child(odd),
.archive .entry:nth-child(odd),
.search .entry:nth-child(odd) {
  margin-right: 4%;
}

It adds a right margin to all of the odd-numbered posts. Try checking for any CSS that may be overriding that code and setting the margin to 0. Also, make sure there are not any elements inside “loop-container” besides the pages/posts.

I sent you access to the test server via pm (slack).

Funny thing: We didn’t make any CSS adjustments. But maybe I’m a little blind.

thanks for the support ??

• This reply was modified 6 years, 8 months ago by Dan Pardella.

Oh I didn’t realize you were using Startup Blog Pro for this modification. Checking out your email now.