Jump to content

Slide show gallery styling for mobile

Recommended Posts

Hi All,

I'm 80% there on styling my galleries, just need help with the last 20%!

I'm using 2 gallery styles; slideshow simple for the top, slideshow reel for the bottom. Everything's perfect on desktop, but I'd like the mobile versions to look exactly the same as the bottom gallery (minus the background strip at the bottom, which i can't seem to get rid of). 

Also, I'd like to increase the size of the nav arrows on both desktop and mobile.

So, full width, with overlayed larger nav buttons on the sides. 

site: https://www.form-and-function.net/work/circuit-zdy48

password: formandfunction 

Thanks for any help!

Screenshot 2023-09-04 at 15.00.55.png

Screenshot 2023-09-04 at 15.01.02.pngmobile.jpg

Edited by JOF01
picture edit
Link to comment
  • Replies 5
  • Views 2.2k
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 weeks later...

Hi Tanphuan,

Sorry about that, not sure what happened there.

Page is here: https://www.form-and-function.net/work/brand-identity

Password: formandfunction

To recap, there are 3 parts to this:

1. Consistent gallery styling on mobile (like the full bleed slideshow reel at the bottom of the page). It could be simplest to duplicate this and copy it under the first simple slideshow, then do some hide/show css on mobile or desktop? But then I'm mindful of keeping the site as simple as possible.

2. Hide green the strip under the bottom gallery on mobile.

3. Increase the size of the nav arrows on both desktop and mobile.

Thanks again for any light you can shed on this! 

Edited by JOF01
Link to comment

#1. #2. Add to Website > Website Tools > Custom CSS > then save & reload the page

@media screen and (max-width:767px) {
[data-section-id="64f589575a63794fbede781e"] .gallery-reel {
    height: 20vh !important;
}
[data-section-id="64f589575a63794fbede781e"] .gallery-reel-list {
    margin: 0 !important;
}
}

#3. Where is nav arrow?

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

Hi Tuanphuan - we're almost there!

See current status: https://www.form-and-function.net/work/brand-identity Password: formandfunction

Unfortunately with the above code snippet added, the images were getting cropped. I found this code in one of your posts on another thread, which should do what I'm after, but it doesn't work on my site for some reason: 

@media screen and (max-width:767px) {
.gallery-fullscreen-slideshow [data-width="full-bleed"] {
    height: 15vh !important;
}
}

I'd like the images on mobile to be dispayed full width, with no cropping.

I'd also like the captions to display underneath the images, but at the moment I think they're picking up some previous css styling for desktop, so have way too much space at the bottom (as you can see on the top mobile slideshow gallery).

Lastly, the navigation arrows can be seen on the top slideshow. I'd like them to be at least twice larger.

Hope that makes sense - as always thank you so much for your help...

Screengrab to show top slideshow:

 

Screenshot 2023-09-27 at 11.41.54.png

Edited by JOF01
Link to comment
  • 2 months later...

I see you solved Image crop, with arrow size, you can use this CSS code

@media screen and (max-width:767px) {
.gallery-slideshow-control-btn .caret-right-icon--small, .gallery-slideshow-control-btn .caret-left-icon--small {
    width: 30px !important;
    height: 50px !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

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.