Jump to content

How to make Carousel displaying only 1 item on mobile only?

Recommended Posts

Site URL: https://www.dadaism.io/home#toppick

Hi there,

I'm new to the community, I couldn't find the answer to my problem so I'm seeking help here.

I'm trying to make the "Our Topic Pick" carousel to display only 1 item when the screen is resized to mobile, but keep 3 items when it's not. Right now when I switch to mobile, it display 2 items, which is not the result I want..

Does anyone know how to solve this? Thanks in advance.

 

Adam

Screenshot 2022-09-20 100417.png

Link to comment
6 hours ago, dadaism said:

Site URL: https://www.dadaism.io/home#toppick

Hi there,

I'm new to the community, I couldn't find the answer to my problem so I'm seeking help here.

I'm trying to make the "Our Topic Pick" carousel to display only 1 item when the screen is resized to mobile, but keep 3 items when it's not. Right now when I switch to mobile, it display 2 items, which is not the result I want..

Does anyone know how to solve this? Thanks in advance.

 

Adam

Screenshot 2022-09-20 100417.png

You can try adding to Home > Design > custom css

@media only screen and (max-width: 767px) {
  section[data-section-id="6310690285fdc040c4e8e871"] .summary-item {
    width: 101.5% !important;
  }

  section[data-section-id="6310690285fdc040c4e8e871"] .summary-item .img-wrapper img {
    width: 100% !important;
    height: 100% !important;
  } 
}

Support me by pressing 👍 if this useful for you

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

My testing

image.png.3d5dc9301df51bc7738b2093db0f8c66.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Wow bangank36 you're a life saver! I've been trying to work it out on my own for the longest time, and I couldn't find it anywhere in the forum. Thank you so much! It's working:)

Do you know if square space's carousel support auto scrolling? And is it possible to make the next and previous arrow bigger on the side instead of small at the top right in mobile?

Edited by dadaism
Link to comment
On 9/22/2022 at 2:58 AM, dadaism said:

Wow bangank36 you're a life saver! I've been trying to work it out on my own for the longest time, and I couldn't find it anywhere in the forum. Thank you so much! It's working:)

Do you know if square space's carousel support auto scrolling? And is it possible to make the next and previous arrow bigger on the side instead of small at the top right in mobile?

Try adding this to Settings > Advanced > Code Injection > Footer

<script>
  Y.on('domready', function () {
       var galleries = Y.Squarespace.GalleryManager.getGalleries();
       for( i = 0; i<galleries.length; i++){
           galleries[i].setAttrs({"autoplay":true})
       }
   });
</script>

 

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

@tuanphan & @Beyondspace I've been looking at the same thing for the site I'm working on i.e. overriding the number of items displayed in a Carousel Summary Block on mobile from 4 (desktop) to 1 (mobile).

While I can make the .summary-items 100% width, the problem occurs that the controls for the Carousel Summary Block don't update to go with it. If you look at @dadaism's site, it suffers the same error. 

If you look at the 'Top Picks' section on the desktop version of the site (https://www.dadaism.io/), it displays a total of 12 items at 3 items per slide across 4 slides. To navigate this, you click the next arrow 3 times.

On the mobile version, the .summary-item size has been modified to display 1 item at 100%, but you can still only click the next button 3 times and therefore only see 4 of the 12 items. Even though the appearance has changed, it seems to still calculate how many slides there are based on the original setting. 

As mentioned, this is happening on my site and i've seen it on others too. So I guess my question is can this be amended? Is there a variable (presumably Json?) that can be modified to make it match up or can slide controls be added to other Summary Blocks? I'd rather not hack it so I double up my Summary Blocks with the different display settings and then use media queries to display them or not. 

Any help or thoughts on what to do would be gratefully received! 🤞

Link to comment
16 hours ago, DinViesel said:

@tuanphan & @Beyondspace I've been looking at the same thing for the site I'm working on i.e. overriding the number of items displayed in a Carousel Summary Block on mobile from 4 (desktop) to 1 (mobile).

While I can make the .summary-items 100% width, the problem occurs that the controls for the Carousel Summary Block don't update to go with it. If you look at @dadaism's site, it suffers the same error. 

If you look at the 'Top Picks' section on the desktop version of the site (https://www.dadaism.io/), it displays a total of 12 items at 3 items per slide across 4 slides. To navigate this, you click the next arrow 3 times.

On the mobile version, the .summary-item size has been modified to display 1 item at 100%, but you can still only click the next button 3 times and therefore only see 4 of the 12 items. Even though the appearance has changed, it seems to still calculate how many slides there are based on the original setting. 

As mentioned, this is happening on my site and i've seen it on others too. So I guess my question is can this be amended? Is there a variable (presumably Json?) that can be modified to make it match up or can slide controls be added to other Summary Blocks? I'd rather not hack it so I double up my Summary Blocks with the different display settings and then use media queries to display them or not. 

Any help or thoughts on what to do would be gratefully received! 🤞

It seems you have figured it out, right? I check that currently, it shows 1 item on mobile display

image.thumb.png.5f6309263abeffb476d9e9a1c121a05a.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
On 11/20/2022 at 8:48 AM, Beyondspace said:

It seems you have figured it out, right? I check that currently, it shows 1 item on mobile display

image.thumb.png.5f6309263abeffb476d9e9a1c121a05a.png

Hi @Beyondspace. Thanks for reading my post and sorry I've not been clear enough. 

Yes, you're right, it does display 1 item on mobile, but that bit isn't the problem.

The issue on the site above (as well as mine and anyone else's who attempt this), is that when you modify it to display 1 item, when you click the 'Next' button on the carousel, it doesn't slide through all of the items. 

Take a look between the desktop and mobile versions to see how many items you can slide through. 

Hope this makes the problem clearer 🙂

 

Link to comment
  • 4 weeks later...
On 12/15/2022 at 3:52 AM, daniellevickers said:

I'm having this same problem! It shows one image at a time on mobile, but it doesn't display all the carousel items.

You can consider adding 2 Carousels, then we will give code to show 1 on desktop, show another on mobile

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

Hi Forum circle members, revisiting the 'How to make a Carousel display a single image on mobile only' thread, I'm not having any luck with the above code example. I think I'm getting the ID details completely wrong. Can anyone assist please?

Or should we try two carousels as noted by @tuanphan and show/ hide? What code would I use for that in 7.0 (I've found instructions for 7.1 but we are in 7.0).

Website is neildesign.com.au

Brine template / Mara Brag / Version 7.0

Thankyou, Helen

Link to comment
On 5/12/2023 at 11:21 AM, Brisvegas_Helen said:

Hi Forum circle members, revisiting the 'How to make a Carousel display a single image on mobile only' thread, I'm not having any luck with the above code example. I think I'm getting the ID details completely wrong. Can anyone assist please?

Or should we try two carousels as noted by @tuanphan and show/ hide? What code would I use for that in 7.0 (I've found instructions for 7.1 but we are in 7.0).

Website is neildesign.com.au

Brine template / Mara Brag / Version 7.0

Thankyou, Helen

If you create 2 carousels, we can give code to show 1 on desktop, show another on mobile

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

Thanks @tuanphan

I have made a second carousel, both shown on this page: https://neildesign.com.au/mobile

my current CSS is below, but obviously not working:

/* Hiding and showing sections */
@media and (max-width:641px) {
section[data-section-id="#block-e5cf74dd476b7a890fa7"] {
 display:none !important;
}
}
@media and (min-width: 641px) {
section [data-section-id="#block-yui_3_17_2_1_1684116914810_14177"] {
 display:none !important;
}
}

 

Thank you for your help.

Link to comment
4 minutes ago, Brisvegas_Helen said:

Thanks @tuanphan

I have made a second carousel, both shown on this page: https://neildesign.com.au/mobile

my current CSS is below, but obviously not working:

/* Hiding and showing sections */
@media and (max-width:641px) {
section[data-section-id="#block-e5cf74dd476b7a890fa7"] {
 display:none !important;
}
}
@media and (min-width: 641px) {
section [data-section-id="#block-yui_3_17_2_1_1684116914810_14177"] {
 display:none !important;
}
}

 

Thank you for your help.

You can try

/* Hiding and showing sections */
@media and (max-width:641px) {
  #block-e5cf74dd476b7a890fa7{
    display:none !important;
  }
}
@media and (min-width: 641px) {
  #block-yui_3_17_2_1_1684116914810_14177 {
    display:none !important;
  }
}

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

thankyou @Beyondspace but it didn't work for me.

This is our entire CSS thread, I'm not sure if it might be an order or placement issue?

Thankyou for your help,

 

the code we have:

/* CSS FOR TABLET AND MOBILE */
@mobile: ~"only screen and (max-width: 640px)";
@tablet: ~"only screen and (min-width: 641px) and (max-width: 949px)";

/* Hiding and showing sections */
@media and (max-width:641px) {
  #block-e5cf74dd476b7a890fa7{
    display:none !important;
  }
}
@media and (min-width: 641px) {
  #block-yui_3_17_2_1_1684116914810_14177 {
    display:none !important;
  }
}

/* CSS FOR TABLET */
@media @tablet {
/* Insert Code for Tablet Below This Line*/
.sqs-block-gallery {
  width: 100%;
  margin-right: auto;
  margin-left: auto;

/* Insert Code for Tablet Above This Line */
}

/* CSS FOR MOBILE */
@media @mobile {
/* Insert Code for Mobile Below This Line*/
.sqs-block-gallery {
  width: 100%;
  margin-right: auto;
  margin-left: auto;

/* Insert Code for Mobile Above This Line */
}

Link to comment
On 5/15/2023 at 10:28 AM, Brisvegas_Helen said:

Thanks @tuanphan

I have made a second carousel, both shown on this page: https://neildesign.com.au/mobile

my current CSS is below, but obviously not working:

/* Hiding and showing sections */
@media and (max-width:641px) {
section[data-section-id="#block-e5cf74dd476b7a890fa7"] {
 display:none !important;
}
}
@media and (min-width: 641px) {
section [data-section-id="#block-yui_3_17_2_1_1684116914810_14177"] {
 display:none !important;
}
}

 

Thank you for your help.

Hide top, show second on desktop

and hide bottom, show top on mobile

Is that right?

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

Add to Design > Custom CSS

/* hide top slide on mobile */
@media screen and (max-width:640px) {
   div#block-e5cf74dd476b7a890fa7 {
    display: none !important;
} 
}
/* hide bottom slide on desktop */
@media screen and (min-width:641px) {
    div#block-yui_3_17_2_1_1684116914810_14177 {
       display: none !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...

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.