Even grid for blog page

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,

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,

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,

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,

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,