Article issues

Hi there,

Thanks for reaching out.

Different title lengths can indeed make the post cards uneven. You can solve it with a small CSS tweak, either by truncating long titles or by fixing the title block height to 3–4 lines. Let me know if any of these options are ok for you.

Kind regards,
XTemos Studio

Hi there,
Thanks for the follow-up. Here are both methods you can try.

Method 1 — Truncate long titles to the same number of lines

.wd-post .wd-post-title {
    overflow: hidden;
    max-height: calc(var(--wd-line-count, 1) * var(--wd-line-height, 1.4em));
    line-height: var(--wd-line-height, 1.4em);
}

Set how many lines you want to show (example: 3)

.wd-post .wd-post-title { --wd-line-count: 3; }

Method 2 — Equalize the height of blog items

1) Add the wd-stretch-cont class to your Blog element wrapper (example: https://take.ms/4UszA).
2) Add this CSS in Theme Settings > Custom CSS:

.wd-blog-element .wd-stretch-cont .wd-carousel-wrap {
   align-items: stretch;
}

.wd-blog-element .wd-stretch-cont .wd-carousel-item {
    height: auto;
}

.wd-blog-element .wd-stretch-cont :is(.wd-post, .wd-post-inner) {
    height: 100%;
}

.wd-blog-element .wd-stretch-cont .wd-post-inner {
  display: flex;
  flex-direction: column;
}

.wd-blog-element .wd-stretch-cont .wd-post-content {
  flex: 1 1 auto;
}

.wd-blog-element .wd-stretch-cont .wd-post-read-more {
  margin-top: auto;
}

Note: If the “Auto height” option is enabled for the Blog/Carousel, this custom CSS will not work.

Kind regards,
XTemos Studio

• This reply was modified 5 days, 17 hours ago by Serg Sokhatskyi.