Even grid for blog page

Hi, I have a question,
How can I set an equal height for the blog cards? Currently due to title difference some cards appear shorter than others. I’d like to set the cards to equal height, similar to the setting you have for the Shop. Can you please provide a code or solution for this? Thank you.

Hello,

Please try to add the below Custom CSS code to Theme Settings > Custom CSS > Global custom CSS.

.blog-design-meta-image .wd-entities-title {
    height: 60px !important;
}

Best Regards,

Hello, thank you but this doesn’t work well. Please see attached.

Attachments:

You must be logged in to view attached files.

Hello,

Please remove the previous code and add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS to control the title line limit.

.blog-design-meta-image .wd-entities-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1; /* Change this value to control the number of lines */
}

Best Regards,

Hi, thank you but I am afraid this doesn’t work either. Now, the longer headings are essentially cut off. If I add more number of lines, e.g. 2, the uneven grid appears again as I have posts with 1 line headings. Screenshot attached for reference:

Attachments:

You must be logged in to view attached files.

Hello,

I’ve checked the issue on your site, and it occurred because blog titles with different lengths were causing uneven card heights in the grid layout.

To fix this, please add the following CSS code under Theme Settings > Custom CSS > Global Custom CSS:

.blog-design-meta-image .wd-entities-title {
  min-height: 50px; /* adjust this value to fit your title area */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

This will ensure that all blog cards maintain an equal height regardless of title length. You can adjust the min-height value if you’d like to make the title area taller or shorter. Please check your site after adding the code.

Best Regards,

Hey again, thank you. This works yet it adds spacing between the blog title and excerpt. Ideally I am hoping the empty space would be at the bottom of the card, after the “read more” button as currently this looks weird (screenshot attached). Is this possible?

Attachments:

You must be logged in to view attached files.

Hello,

Instead of reserving space in the title, we should make the post card a column-flex container and let the content area grow. Then push any empty space to the bottom by setting the “Read more” area to margin-top: auto. Try to add the following custom css code in Theme Settings > Custom CSS:

/* Make post card a full-height flex column */
.wd-post .wd-post-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Let content area grow so footer/read-more stays at bottom */
.wd-post .wd-post-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* Truncate long titles without reserving fixed space */
.wd-post .post-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* change to 1 or 3 if you prefer */
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.5rem;
}

/* Keep excerpt normal but avoid extra top spacing */
.wd-post .wd-post-desc {
  margin-top: 0;
}

/* Push the Read More / footer to the bottom of the card */
.wd-post .wd-read-more {
  margin-top: auto;
}

Best Regards,

Nice, thanks! Much better now! Just one tiny detail: before I add the code, there’s a little space between the blog post excerpt and the read more button. After I add the code, in the cards with longer titles the excerpt gets “glued” to the read more button. Attaching two screenshots for reference. Thank you!

Attachments:

You must be logged in to view attached files.

Hello,

I’m glad to hear the layout looks much better now!

Regarding the spacing between the excerpt and the “Read More” button — you can easily restore a small gap by adding a bit of bottom margin to the excerpt section. Please add the following adjustment under Theme Settings > Custom CSS > Global Custom CSS (you can place it after the previous code):

/* Add space between excerpt and Read More button */
.wd-post .wd-post-desc {
  margin-bottom: 10px; /* adjust this value as needed */
}

Best Regards,

That is perfect. Thank you so much! Would you consider adding equal height for the blog posts in the settings, just like you have for the products? That would be great!

That is perfect. Thank you so much! Would you consider adding equal height for the blog posts in the settings, just like you have for the products?

[Author]

Posts