Change Summary Block from List to Stacked/Grid in Mobile?

I have a website I'm working on for a client where I have a summary block for their calendar on their events page.
Right now its set as a "list" in the summary block, and I like the way it looks on the computer, but would like to switch it to "stacked/grid" view on mobile so the thumbnail image is above the info as opposed to being kinda small and on the left taking away space from the text.

Is there a way via CSS to switch the summary block mode in a media query?

Due to contractual obligations I need to keep the beta site locked and can't share it, but shouldn't matter as its a general question, nothing specific to any "item" on a specific site...

Hi,

Can you share link to page where you added Summary?

@subliminalsf Were you able to figure out a CSS code for this? - ie switching from a List view summary on desktop to a "stacked/grid" view on mobile?

On 10/21/2021 at 1:52 AM, gleemedia said:

@subliminalsf Were you able to figure out a CSS code for this? - ie switching from a List view summary on desktop to a "stacked/grid" view on mobile?

If you share link to page where you added summary, we can take a look

I would also like the "list" summary style to stack the image above the text on mobile, but nothing I've tried seems to be working properly. I've attempted using some of the CSS methods I've seen online (and in this thread) and some of them work partially (they'll work from 900 max width down to about 700 max width), but pop back into regular side-by-side list view when it gets down to the mobile view. It's very frustrating.

I'm not sure why Squarespace hasn't made this an option in the design panel for at least mobile view of the "list" summary style. I'm sure some people like the way the side-by-side looks on mobile, but having the option would be nice and it seems very short-sighted not to at least offer it.

2 hours ago, MRCG said:

I would also like the "list" summary style to stack the image above the text on mobile, but nothing I've tried seems to be working properly.

Please provide us with a working link to the page so that we can take a look.

The page is mrcg.squarespace.com and the password to view is newmrcg2022

On 4/13/2022 at 9:46 PM, MRCG said:

The page is mrcg.squarespace.com and the password to view is newmrcg2022

Try adding to Design > Custom CSS

/* Homepage Summary */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1645297355550_28252 .summary-item>div {
    width: 100% !important;
}
div#block-yui_3_17_2_1_1645297355550_20095 .summary-item>div {
    width: 100% !important;
}}

11 hours ago, tuanphan said:

Try adding to Design > Custom CSS

/* Homepage Summary */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1645297355550_28252 .summary-item>div {
    width: 100% !important;
}
div#block-yui_3_17_2_1_1645297355550_20095 .summary-item>div {
    width: 100% !important;
}}

This worked! Thank you so much!

On 4/18/2022 at 1:50 PM, MRCG said:

This worked! Thank you so much!

Hey thanks got this to work at https://rwspresents.com/shows but now the Title for each event/listing is still left justified, how do I fix this?

On 10/10/2022 at 6:33 AM, subliminalsf said:

Hey thanks got this to work at https://rwspresents.com/shows but now the Title for each event/listing is still left justified, how do I fix this?

Hi,

It looks centered here. Can you take a screenshot?