Hi there,
I’m hoping to get some help with layout alignment on our article preview grid. Right now, each card displays different image heights and varying text lengths, which is causing the rows to become misaligned. The “Read more” buttons end up at different vertical positions.
What I’d like to achieve:
• All cards in the row have their images aligned at the top
• The content areas stay consistent in height
• The “Read more” buttons sit in the same position across all cards
• The bottoms of the cards line up evenly, regardless of text length
Essentially, I’m trying to ensure the rows look visually uniform both at the top and bottom, so the grid appears clean and balanced.
Can you help me identify what needs to be adjusted in the layout or CSS to make the card heights consistent?
Thank you!
URL: staging.cvbnetwork.com
Hi,
What cna be done is to set the title length smaller – https://i.imgur.com/IbUdvjW.png or another solution will be to add an extra class on blocks you want to apply a custom css to overflow the title: https://i.imgur.com/DOlMaKS.png
.my-cls .td_module_wrap .entry-title {
overflow: hidden;
height: 25px;
}
The css can be set globally in the theme panel under custom code, custom css, or only in that page/template inside a raw css element.
I hope thsi will help you!
Hello! Thank you so much for this. Is there any way to allow more space for the title, and have the clipped bit to maintain even alignment along the top of the card and the buttons on the bottom be the excerpt length?
Hi,
Please provide a link where I cna check those blocks, in this way it will be easier to create a css solution for your needs.
Thank you!
Hello, here’s the link
https://staging.cvbnetwork.com/
Hi,
Please try this css:
.my-cls .td_module_wrap .entry-title {
overflow: hidden;
height: 75px;
}
Just make sure that you add the class ‘my-cls’ on the flex block you want to use the code https://imgur.com/DOlMaKS
Thank you!
Hello, I’m still having a similar issue, my images look great but I am getting cropping on the bottom of the flex block. I need space for the full title, but then for the ‘read more’ buttons on the bottom to be aligned.
This is happening on my site here
Hi,
I see you want the module to be the same height, right now, this is based on the title, excerpt and read more button – https://i.imgur.com/KiQ5Ff6.png
What you can do is to check a solution provided in this similar situation – https://forum.tagdiv.com/topic/flex-block-1-and-same-blocks-height/
