Jump to content

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

Recommended Posts

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.

image.thumb.png.b4d4d55fdf48672c4a4552daae17d245.pngimage.thumb.png.8eabd67a8b162067220054f165c28c0b.png

Link to comment
  • Replies 15
  • Created
  • Last Reply

Top Posters In This Topic

Try adding to Design > Custom CSS

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

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

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

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

 

953404077_CleanShot2022-05-01at15_00.04@2x.thumb.png.4b7b0fdc71349d6f90078a5e99a0f890.png

 

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

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

 

953404077_CleanShot2022-05-01at15_00.04@2x.thumb.png.4b7b0fdc71349d6f90078a5e99a0f890.png

 

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

Try add it then reload your site

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

1809840284_CleanShot2022-05-05at12_48.45@2x.thumb.png.c440a6ce4237c74d9ea6c383c5fad0cf.png

 

 

 

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

245412947_CleanShot2022-05-05at12_46.17@2x.thumb.png.1e8a18c6cb319f47d8b3c9223fbe1623.png

1314353089_CleanShot2022-05-05at12_47.15@2x.thumb.png.eec50b504d70caff6c13ad7075923a68.png

 

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!

CleanShot 2022-05-05 at 12.42.17@2x.png

CleanShot 2022-05-05 at 12.42.25 2@2x.png

 

Edited by leguido
Link to comment
  • 7 months later...

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

 

Desktop View.png

Mobile View.png

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

 

Desktop View.png

Mobile View.png

Hi,

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

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 weeks later...
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

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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

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

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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.

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.