Gallery Reel Slideshow 7.1 - how to make mobile and desktop section heights different?

Site URL: http://laurelguido.squarespace.com

Hi - 

I want to use a reel slideshow inside each of my projects listed on my gallery page. On the desktop, I would like to use either the medium or large height for the block that contains the slideshow. However, on mobile, I would like the height of the slideshow block to be small. How can I adjust the reel slideshow on only the mobile view?

one of the projects with the medium height (correct) reel: https://laurelguido.squarespace.com/config/pages/6135d3c112370a6f0c6612d5

---> and when you look at the mobile view, the images are too zoomed in, and look better if I change the height to small.

Try adding to Design > Custom CSS

/* Artworks */
body#collection-613a91744ec5a30be1b3b3a3 .gallery-fullscreen-slideshow {
    height: 40vh !important;
}

20 hours ago, tuanphan said:

Try adding to Design > Custom CSS

/* Artworks */
body#collection-613a91744ec5a30be1b3b3a3 .gallery-fullscreen-slideshow {
    height: 40vh !important;
}

 

I'm actually using a reel slideshow (if that matters) but it still doesn't work. 😕 I have quite a few pages like this one with different editorials and will I need a different css for each page?

On 4/30/2022 at 12:30 PM, leguido said:

I'm actually using a reel slideshow (if that matters) but it still doesn't work. 😕 I have quite a few pages like this one with different editorials and will I need a different css for each page?

You can use this code for all

.gallery-fullscreen-slideshow {
    height: 40vh !important;
}

11 hours ago, tuanphan said:

You can use this code for all

.gallery-fullscreen-slideshow {
    height: 40vh !important;
}

 

So I put this ^^ but nothing happened.

I then put this, which at least did something:

/* Mobile slideshow padding */
@media screen and (max-width:767px) {
  .gallery-reel-item {
    height: 40vh !important;
}
}

but it just crops the image instead of making it smaller?

On 5/2/2022 at 3:06 AM, leguido said:

So I put this ^^ but nothing happened.

I then put this, which at least did something:

/* Mobile slideshow padding */
@media screen and (max-width:767px) {
  .gallery-reel-item {
    height: 40vh !important;
}
}

 

 

but it just crops the image instead of making it smaller?

Try add it then reload your site

On 5/1/2022 at 3:58 AM, tuanphan said:

.gallery-fullscreen-slideshow {
    height: 40vh !important;
}

Okay so I put this ^^ and added this for just mobile, since I didn't want to change the height on desktop.

@media only screen and (max-width: 640px) {
.gallery-fullscreen-slideshow {
    height: 40vh !important;
}
}

This works on the slideshow that is "full: full bleed" but not the reel ones:

full: full bleed:

I'm having trouble with the cropping of the reel images either on desktop or mobile, one is always cropping while the other shows the full image: 

mobile vs. desktop: reel: full (height:medium)

desktop = correct, mobile = cropped

all the heights for the vertical images are the same as the heights of the horizontal images, but on mobile, it still crops the image. 

Sorry if this is confusing!

Can you share link to page where you use fullbleed slideshow + reel?

On 5/8/2022 at 3:13 AM, tuanphan said:

Can you share link to page where you use fullbleed slideshow + reel?

https://laurelguido.squarespace.com/stories/sheltered-spring

I am having the same issue with my image slideshow (version 7.1).  The gallery type is "Slideshow:Full, Width=Full, Height = S. Everything looks good on the desktop but the mobile version is cropped and shows only a section of the image. I also have text on the image so when switching to the mobile view, only a portion of the text shows. 

Surely, Squarespace QA Team ran into this issue?? I've attached a screenshot of the desktop vs mobile view. Please help!!

On 12/17/2022 at 12:21 PM, jotobias said:

I am having the same issue with my image slideshow (version 7.1).  The gallery type is "Slideshow:Full, Width=Full, Height = S. Everything looks good on the desktop but the mobile version is cropped and shows only a section of the image. I also have text on the image so when switching to the mobile view, only a portion of the text shows. 

Surely, Squarespace QA Team ran into this issue?? I've attached a screenshot of the desktop vs mobile view. Please help!!

 

Hi,

If you share link to page where you use slideshow, we can give some simple code to resize it on mobile

Hi Tuan, I decided to implement a different method.

Here's the link: www.rootshootsoils.com

I think I'll stick with this for now.

On 1/6/2023 at 3:14 AM, jotobias said:

Hi Tuan, I decided to implement a different method.

Here's the link: www.rootshootsoils.com

I think I'll stick with this for now.

Okay. If you have any other problems with this, let me know, we will check it again

Hi @tuanphan,

can you please help me out with rescaling in the mobile version as well?
 

It is related to this site: https://www.davidmatthaeus.com/work
where for some pictures in the reels, the sides of the image are cut in the mobile version.

Unfortunately, I wasn't able to reuse the CSS posted above.

Bonus question: Is squarespace working on a lightbox implementation for the reel slideshows?
 

Thanks,

David

On 1/15/2023 at 12:48 AM, DavidMatthaeus said:

Hi @tuanphan,

can you please help me out with rescaling in the mobile version as well?
 

It is related to this site: https://www.davidmatthaeus.com/work
where for some pictures in the reels, the sides of the image are cut in the mobile version.

Unfortunately, I wasn't able to reuse the CSS posted above.

Bonus question: Is squarespace working on a lightbox implementation for the reel slideshows?
 

Thanks,

David

Try adding to Design > Custom CSS > Then save & Reload the site

@media screen and (max-width:767px) {
.gallery-reel {
    height: 30vh !important;
}
}

Lightbox doesn't work with Reel Gallery. You can consider using List Section Carousel

Thanks, Tuan.

Unfortunately the proposed code cuts the pictures. But based on your comment I switched to List Section Carousel and found a solution there.
Unfortunately, lightbox in list carousel is only available with an additional plugin one needs to buy. But also there, I found a solution.

On 1/22/2023 at 5:45 AM, DavidMatthaeus said:

Thanks, Tuan.

Unfortunately the proposed code cuts the pictures. But based on your comment I switched to List Section Carousel and found a solution there.
Unfortunately, lightbox in list carousel is only available with an additional plugin one needs to buy. But also there, I found a solution.

Are you still looking for Lightbox Enabled on Reel Slideshow? Check this if it work on your site