Jump to content

Change Gallery Slideshow Size for Mobile Only

Go to solution Solved by tuanphan,

Recommended Posts

  • Solution

Add to Design > Custom CSS > Then save & reload your site

/* resize mobile slideshow */
@media screen and (max-width:767px) {
body.homepage .gallery-fullscreen-slideshow {
    height: 30vh !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
  • 1 year later...
On 2/19/2021 at 7:57 AM, tuanphan said:

Add to Design > Custom CSS > Then save & reload your site

/* resize mobile slideshow */
@media screen and (max-width:767px) {
body.homepage .gallery-fullscreen-slideshow {
    height: 30vh !important;
}
}

 

tuanphan - thanks so much for this bit of code! This works perfectly for the homepage. How should the code look so that it applies to the entire site though? I'm having issues with galleries on all pages being too tall on mobile. 

Link to comment
On 11/15/2022 at 12:39 AM, astn_mrtn said:

tuanphan - thanks so much for this bit of code! This works perfectly for the homepage. How should the code look so that it applies to the entire site though? I'm having issues with galleries on all pages being too tall on mobile. 

Remove body.homepage from the code

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 year later...
On 2/19/2024 at 1:24 AM, Leticia said:

tuanphan I tried using this code but its not working. Can you please help I need the team members the slideshow on mobile to look smaller so it can display more people as together. 

https://seadragon-gold-ge8l.squarespace.com/config/pages

https://seadragon-gold-ge8l.squarespace.com/homepage

Use this CSS code then save & reload the page

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

image.png.cd852add9e3711eb2ff1308f4fc60dbb.png

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.