Image blocks into multiple columns in summary block

Site URL: https://www.massatrocityresponses.com

Hi, 

I have a blog page on my website and a events page on my website. For the blog page I used the blog template under collections, which I really like. It has 3 images next to each other and when I make the window smaller it takes a while before it goes down to one in a row. However, in my events page I wasn't able to create a layout that looks similar to the blog page- because the events page under collections has a preset layout that is one event in a row (even in desktop view). Since I did not find a code that could change the layout of the events page I added a blank page in the main navigation and used the summary block to create the desired layout and added content from a linked page with the events template that I will not make visible to page visitors. However, the events page (with the summary block layout) will not act like the blog layout when I make the window smaller. In detail; when minimizing the window it takes longer in the blog section for the image blocks to turn into multiple columns. Basically I want the summary page layout to stay 3 events next to each other in a row as I am making the window of the page smaller. I would need a code for the summary layout that would act the same as the blog section as I make the window smaller so that it goes from 3 events horizontally next to each other to one, instead of 3 - 2 - 1.

I attached a screen recording of the blog section as I minimize the window and the events section. 

Can anyone help me with this? 

Hi,

Blog on Homepage or Resource Page?

6 hours ago, tuanphan said:

Hi,

Blog on Homepage or Resource Page?

The blog is on the homepage. But the events page is a page by itself in the main navigation.