Jump to content

[Share] Gallery Slideshow: Different height for desktop and mobile

Recommended Posts

Posted

To set different height for desktop and mobile with a Gallery Slideshow, you can do these.

#1. Slideshow Simple/Full

First, you need to set height on Desktop

image.png.5dd5d48fb0ba591574974dbcc842dbe0.png

Next, find ID of Slideshow section

In my example, we will have:

section[data-section-id="66ed2c3e2f063471736e09c1"]

image.png.56893509cecea48047d8de6e76248c2d.png

Next, use this code to Custom CSS to change Slideshow height on Mobile

/* Mobile Slideshow */
@media screen and (max-width:767px) {
    section[data-section-id="66ed2c3e2f063471736e09c1"] .gallery-fullscreen-slideshow {
        height: 35vh !important;
    }
}

image.png.39ef882f4379b8050ec17964dd7ddc69.png

we will have

image.png.ff2d512c634c60f6c386aa0aa03923d2.png

#2. Slideshow Reel

First, you need to set Reel Height for desktop

image.png.5fc7c07e53985b0fbe21896f3af4d7c5.png

Next, find Reel ID.

In my example, we will have:

section[data-section-id="6707a04e0b698b4fb4bd8f3e"]

image.png.3ce9edd2269e325e5e964c3c8dfe39cb.png

Next, use CSS like this to Custom CSS Box

@media screen and (max-width:767px) {
    section[data-section-id="6707a04e0b698b4fb4bd8f3e"] .gallery-reel {
        height: 35vh !important;
    }
}

image.png.aab37259ccf186da62e2700115ad5498.png

we will have

image.png.2cdc60117f15f24cec3f27d737a555ec.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!)

  • Replies 0
  • Views 457
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

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.