Responsive blog and summary cards

Hi all, 

I am trying to make my blog grid items and summary block items look like cards. I have managed to add a white background and sometimes a border but once the page size changes, the background doesn't 'hold' the read more link and the excerpt. 

Is there a way of making this responsive so that all the wording stays within the card?

I have tried to search but cant find anything. 

any help appreciated. 

an example of the page is https://theactionists.co.za/store

Because you used CSS to set fixed height 55vh, you can remove that code

or add this code to override it

#collection-6490b3d03f4b21757e2154ad .summary-item {
    height: unset !important;
}

@tuanphan Ah thanks so much. The height was there because I want them all to bee the same height, the problem is if the title or excerpt are longer on some of the items then the boxes are different sizes. 

Ideally, I want the read more link to stay at the bottom of each item aligned across each item and the boxes to be the same size regardless of excerpt length. 

Does that make sense?

Thom

@tuanphan So actually they all seem to be the same height, my question then is how do I keep the read more links at the same place aligned to the bottom of the card, so that they are all in an allignd row?

thanks

Use fixed height will create problem on some screen sizes

To make them equal height, you should use same image size, then set fixed height for title + excerpt (you will need set code for both desktop + tablet)

@tuanphan Oh ok, that sounds complicated. there is no way of telling the read more link to align to the bottom of the container?

On 6/25/2023 at 3:48 PM, ThommyP said:

@tuanphan Oh ok, that sounds complicated. there is no way of telling the read more link to align to the bottom of the container?

 

You can remove your fixed height code, I can check & give the code