Blog (Meta on Image) make same height

This topic has 7 replies, 2 voices, and was last updated 2 days, 21 hours ago by Aizaz Imtiaz Awan.

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
March 23, 2025 at 4:17 pm #648277

admin-2531
Participant

Hi,

Is it possible to make each blog entry the same height?
Image attached.

Thanks.

Attachments:
You must be logged in to view attached files.

March 23, 2025 at 5:31 pm #648286

admin-2531
Participant

Also, I’d like to show blogs 3 on desktop, 2 on tablet and 1 on mobile.

Thanks

March 24, 2025 at 2:32 pm #648446

Aizaz Imtiaz Awan
Keymaster

Hello,

The difference in height between blog entries is primarily due to the length of post titles. Longer titles naturally take up more vertical space, which affects the overall height of each entry.

If you’d like, share the page URL where the blog entries are situated so I can check and give you a possible custom css code.

Best Regards,

March 24, 2025 at 2:49 pm #648452

admin-2531
Participant

Hi,

The URL is https://dev.infatot.com/

Also, I’d like to show blogs 3 on desktop, 2 on tablet and 1 on mobile, as these are just blog previews.

Thanks.

March 24, 2025 at 5:47 pm #648522

admin-2531
Participant

I’ve fixed the problem with showing 3 on desktop, 2 on tablet and 1 on mobile.

I only now need help making the blog posts the same size.

March 24, 2025 at 8:16 pm #648574

Aizaz Imtiaz Awan
Keymaster

Hello,

I’ve checked your site and currently see only one blog post:
https://ibb.co/Q79j9HVH

Could you please add a few more blog posts, similar to what you showed in the screenshot? Once they’re added, I’ll be able to check and align them to have the same height.

Best Regards

March 24, 2025 at 8:23 pm #648579

admin-2531
Participant

That’s odd. I’ve opened in incognito and can see the 3 images on desktop.
Please see attached.

Attachments:
You must be logged in to view attached files.

March 25, 2025 at 11:10 am #648717
Aizaz Imtiaz Awan
Keymaster
Hello,

01. Try to add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:
```
.blog-design-meta-image .post-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2; /* Change this value to control the number of lines */
}
```
02. For the blog columns, edit the blog widget in Elementor and in the style tab change the number of columns on different devices: https://ibb.co/hxC3szRz

Best Regards,
Author

Posts