I have a page with a view that displays posts in 3 columns. The height of the feature image of each post can have a different aspect ratio so the height of the cards for each post is different.
hidden link
How can I make it so all cards on the same row have the same height?
Hello, there are several options here and the best solution depends on your personal preferences. One option is to use CSS to create a minimum height for each cell. Choose a minimum height that is taller than the normal height of the shortest element, like so:
.list-view-loop.publicaciones-view-loop {
min-height: 300px;
}
You can adjust the 300px setting as desired. This will be an effective way to equalize the heights of the cells, and might be a simple way to solve the problem. However, it may not be effective at all screen sizes and resolutions. The minimum height may be too tall in some cases, leaving a large amount of white space around each cell. Since the aspect ratio is variable, the results may appear inconsistent. A series of media queries in CSS may be necessary to tweak this display at different screen sizes.
Another option is to set the featured image block to use a consistent image size, like the built-in "thumbnail" size, which is cropped to 150x150 (screenshot attached). That could help equalize the image heights, but not necessarily the cell heights. If a cell has a large amount of text content, you may still have problems with unequal cell heights. The solution here may require a combination of both approaches.
