Latest blogs in a carousel on the homepage display issues
-
I’d like to display our latest blogs in a carousel on the homepage. If I use the xtemos element widget for Elementor, then the images give dimension display issues. It does not adapt the same height for all cards.
It seems very buggy.
How can I resolve this?
Hello,
You need to upload images of the same size and proportion. Alternatively, disable the masonry grid in the Theme Settings > Blog > Blog archive.
But your column height depends on the amount of content in the blog.
If you have any questions, please feel free to contact us.
Best Regards,
Woodmart does adjust card height for product grids. i.e. if one card in a row is higher, then the whole row will adjust. Some years ago you added this fix/feature to product grids. It would be nice to see it for blog carousel as well.
The default Elementor widget does not have the same image dimensions issues that the woodmart widget has. Image size is different and does not give display issues in the default Elementor widget.
Only the woodmart widget has this issue.
We are currently using the default Elementor widget because the woodmart widget seems buggy.
But the woodmart widget has a carousel function which is really nice for mobile. It would be awesome if we could use it without the display issues.
Hello,
Sorry to hear about the inconvenience. Kindly, please share your Site WP-ADMIN Login details in the Private Content field so that we can check this concern on your Site and help you out accordingly.
Best Regards,
On our main blog page you can find Woodmart carousels with the issues below.
On our blog category pages you can find woodmart blog grid with the issues listed below.
On our homepage we currently have the carrousel removed because it doesnt display nicely.
Please see if you can fix it on our blog pages, so that we also add it to our homepage.
Issues you can see:
1. Images of different height are not set to the same height per row.
2. blog card height is not the same per row.
3. Text is algined centred instead of left aligned.
The default grid in WordPress does not have these issues. If we use that then its all fixed. But we need carousel instead of grid. Woodmart should use the same standards as the platform.
Hello,
For the best results, it’s always recommended to use featured images with the same dimensions for your blog posts. This ensures a uniform and visually appealing layout across the blog grid and widgets.
However, if you prefer not to resize or upload new images, Try to add the following custom css code in Theme Settings > Custom CSS and check how it works.
/* Force equal image height */
.blog-design-masonry .wd-post-thumb {
height: 260px;
}
.blog-design-masonry .wd-post-thumb img {
height: 100%;
object-fit: cover;
}
/* Clamp title lines */
.blog-design-masonry .wd-post-title {
display: -webkit-box;
-webkit-line-clamp: 1; /* change to 3 if needed */
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Clamp excerpt lines */
.blog-design-masonry .wd-post-excerpt {
display: -webkit-box;
-webkit-line-clamp: 5; /* adjust as needed */
-webkit-box-orient: vertical;
overflow: hidden;
}
Best Regards,
.
