Misalignment of blog articles – how to fix?
-
Hello, on the blog here https://ivoltbg.info/blog/
about why there is a misalignment between the articles. I am attaching a screenshot. How can this be fixed so that all the articles are aligned evenly?
Best regards,
Nikola
Attachments:
You must be
logged in to view attached files.
Hello,
It is due to the content you have added: https://postimg.cc/bSnrVJy2 , Please try to add equal content, then it will look perfect.
If you have any questions feel free to contact us.
Best Regards,
Hi,
This seems like an impossible task. Could you tell me another way to achieve it with styling so that it doesn’t expand when the text is longer?
Best regards,
Nikola
Hello,
Please add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:
.blog-design-meta-image .wd-post-inner {
min-height: 300px;
}
Best Regards,
Hello,
I added a topic with slightly longer content and it expanded to its maximum. Could you tell me what value I should now set for “min-height:” so that they can be aligned under all circumstances?
You can check again at https://ivoltbg.info/blog/
Best regards,
Nikola
Hello,
I’ve checked your blog again — the reason the alignment still varies is that min-height only sets the minimum height of the card. If one post has more text than the others, its container will grow beyond the min-height value, so they’ll never be perfectly aligned on all screen sizes if the content length isn’t equal.
Please remove the previous code and add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:
.blog-design-meta-image .wd-post-inner {
display: flex;
flex-direction: column;
height: 100%;
}
.blog-design-meta-image {
display: flex;
flex-direction: column;
height: 100%;
}
.wd-blog-holder .wd-blog-grid {
align-items: stretch;
}
Best Regards,
Hello,
Perfect, that’s exactly what I meant, just as you explained. Thank you for the wonderful solution. I really, really like it!
You can close the topic, thank you!
Best regards, Nikola
.
