Jump to content

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

Recommended Posts

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...

Screen Shot 2021-08-24 at 2.01.30 AM.png

Link to comment
  • Replies 10
  • Views 633
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

  • 1 month later...
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 5 months later...

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.

Link to comment
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.

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
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;
}}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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!

Link to comment
  • 5 months later...
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.