Jump to content

How to convert homepage summary block (carousel) to stacked in mobile view?

Go to solution Solved by tuanphan,

Recommended Posts

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

Hi!

I just want to ask if anyone has a CSS code to turn the carousel summary block into stacked mode when viewed on mobile?

Summary block looks fine on desktop view:

1068185837_ScreenShot2021-09-02at3_28_37PM.thumb.png.b73202089fdc2c48acf8d8082104ea8a.png

 

But when switched to mobile it starts with a blank white area, and then slides into 4 thumbnails. Ideally, we wanted this stacked so it looks nice on a small screen.

591939489_ScreenShot2021-09-02at3_28_53PM.png.4e0e09130b2ecac40b0f4d6187f36f79.png50060249_ScreenShot2021-09-02at3_29_07PM.png.bb896c1aa1f862c74b1b9a5beab6df7d.png

 

Thanks to anyone who can help.

Link to comment
  • 2 weeks later...
  • Solution
On 9/17/2021 at 10:42 PM, Aki_0011 said:

Hi @tuanphanits disabled now.

Hi,

Don't remove any code in your current code.

Add this to Design > Custom CSS

/* Stacked homepage summary */
@media screen and (max-width:767px) {
body.homepage .summary-item {
    width: 100% !important;
}
body.homepage .summary-carousel-pager.sqs-gallery-controls {
    display: none;
}
}

 

Edited by tuanphan

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
  • 6 months later...

Hi, I'm using a similar code to the above but my content is shrinking smaller than it should. There is a lot of empty space on the right side even though my width is set to 100%. Any ideas on how to fix this?

This is the code I have now:

/* Stacked homepage summary */
@media screen and (max-width:767px) {
.sqs-block-summary-v2 .summary-item.positioned {
    width: 100% !important;
    position: static;
}
.sqs-block-summary-v2 .summary-item-list {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
  }

 

site: collectorsquadron.com (no password needed - site is live)

Link to comment
6 hours ago, justjilllauren said:

Hi, I'm using a similar code to the above but my content is shrinking smaller than it should. There is a lot of empty space on the right side even though my width is set to 100%. Any ideas on how to fix this?

This is the code I have now:

/* Stacked homepage summary */
@media screen and (max-width:767px) {
.sqs-block-summary-v2 .summary-item.positioned {
    width: 100% !important;
    position: static;
}
.sqs-block-summary-v2 .summary-item-list {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
  }

 

site: collectorsquadron.com (no password needed - site is live)

Try adding to Design > Custom CSS

html, body {
	overflow-x:hidden;
}

 

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

@tuanphan I have a related question, but I don't think it's addressed here (or anywhere else I could find). I am using a summary carousels on my HP (two for product and one for blog). It appears fine on desktop. In mobile, all of the items appear stacked, 2 per row, on the main page. When you click on the right arrow, it's a blank screen. (See attached.) 

I only want 2 items to appear on the main page, with functionality to click right arrow to see more. I think I might have some other code in CSS that's creating 2 columns for summary grids across the site, and I still want that elsewhere. Do you have a solution?

My site is: https://vuvuzela-pug-95je.squarespace.com (PW: flowerZ612)

Many thanks! 

 

 

Screen Shot 2022-09-26 at 11.55.37 PM.png

Screen Shot 2022-09-26 at 11.55.27 PM.png

Link to comment
  • 5 months later...

Hi, 

I used this code on my website, apoppyplace.com, and there is a lot of open space on the right side. How can I center it? Thanks

/* Stacked homepage summary */
@media screen and (max-width:767px) {
body.homepage .summary-item {
    width: 100% !important;
}
body.homepage .summary-carousel-pager.sqs-gallery-controls {
    display: none;
}
}
Link to comment
On 3/3/2023 at 3:03 AM, theloopylace said:

I am trying to stack the carousel summary block on my home page in mobile. 

apoppyplace.com

Thanks!

 

 

Screen Shot 2023-03-02 at 12.02.51 PM.png

You can consider adding 2 Summaries: Carousel - Stacked, then we can give code to show 1 on desktop, show another on mobile.

Convert from Carousel to Stacked is very complex

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
  • 10 months later...

Hi - I am trying to do the same thing and am willing to do two summaries, and show one and mobile and one on desktop. Can you provide the code for the solution? My site is live and I'm editing an unenabled page so if you can just provide the general code, I can tweak it for my needs. 

Link to comment
9 hours ago, ZKE said:

Hi - I am trying to do the same thing and am willing to do two summaries, and show one and mobile and one on desktop. Can you provide the code for the solution? My site is live and I'm editing an unenabled page so if you can just provide the general code, I can tweak it for my needs. 

You can duplicate the page & add there, I can give code for duplicated page & give you a quick guide to apply it to main page

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
  • 3 weeks later...
On 2/7/2024 at 8:13 PM, ZKE said:

Hi @tuanphan -- the page is live now: https://www.dearavantgardener.com/. I'd like to stack those first two blog posts on mobile and have them side by side on desktop. thanks for your help

You can use this code to Website > Website Tools > Custom CSS

@media screen and (max-width:767px) {
body.homepage .summary-item {
    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
  • 2 weeks later...

Thank you @tuanphan -- unfortunately this solution only shows the first summary block item on mobile, instead of stacking both. From other pages I see the solution is to have two summary blocks, carousel and grid, and hide the first on mobile and second on desktop. I've done this on page dearavantgardener.com/home-1. Can you please help me with the CSS?

Link to comment

@tuanphan Nevermind, I think I found the code! For everyone else looking for this solution, inject this custom CSS in the Website Tools and replace the placeholder text with your own section IDs:

// Hiding and showing sections
@media screen and (max-width: 641px) {
section[data-section-id="YOUR-SECTION-ID-HIDE-FROM-MOBILE"] {
 display:none !important;
  }
}
@media screen and (min-width: 641px) {
section[data-section-id="YOUR-SECTION-ID-HIDE-FROM-DESKTOP"] {
 display:none !important;
  }
}
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.