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

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:

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.

Thanks to anyone who can help.

Hi,

Can you disable summary autoplay temporarily? We can check easier

Hi @tuanphanits disabled now.

Thank you so much! It worked! ^__^

PS: How do I get rid of the arrow buttons above the summary block in mobile?

21 hours ago, Aki_0011 said:

Thank you so much! It worked! ^__^

PS: How do I get rid of the arrow buttons above the summary block in mobile?

Updated above code

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)

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;
}

12 hours ago, tuanphan said:

Try adding to Design > Custom CSS

html, body {
	overflow-x:hidden;
}

Thanks, but I'm not seeing any change. Anything else I can try?

@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! 

@tuanphan  Noodled around some more and I figured it out. I removed the old code which which I believed covered ALL summary blocks. After that the functionality for carousel was correct. Then I found code below to create two column on mobile for grid summary only.  

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;
}
}

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

apoppyplace.com

Thanks!

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!

 

 

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

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. 

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

On 1/23/2024 at 3:37 AM, tuanphan said:

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

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

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;
}
}

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?

@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;
  }
}