Jump to content

Gallery Block Sizing on Mobile

Recommended Posts

Hi there,

I am hoping there is a simple fix for an issue I am having. The gallery on desktop is exactly how I would like it to look, as a full-page slideshow is to be the focal point of the page. Additionally, we are fading in a logo over the slideshow, so we must use the gallery block vs. the gallery section. 

The issue is, on mobile the slideshow takes up only 1-2 inches of the page. I would like to make the slideshow take up more vertical space on mobile, essentially filling the entire screen, even if this means cutting off the sides of the images a bit. When I try to optimize the layout on mobile, it does not allow me to stretch the gallery taller.

https://goldfish-sunfish-7bdg.squarespace.com/  Pass: KLI

Thanks in advance for your help!

Claire

Link to comment

Hi there -

Thanks so much for your response.

I have the gallery block for two reasons - 

- the client wants a smoother/slower transition between slides and
- the client would like elements on top of the slideshow (logo fading in, menu)

Totally happy to switch to a block if it's still possible to achieve these two points! 

Link to comment
  • 2 weeks later...

You try adding this code to Design > Custom CSS

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1689670808952_37244, div#block-yui_3_17_2_1_1689670808952_37244 .slide, .sqs-gallery-design-stacked-slide img {
    height: 70vh !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

Hi @CGP123

Sorry to jump into this loop.

My name is Kelly. I just accidentally found your website, and I couldn't help but notice the beautiful folding menu in the PC view. It looks so cool and seamless! I was wondering if you would be willing to share how you achieved this effect?

Thank you for your time, and I look forward to hearing from you : )

Link to comment
10 hours ago, Kellyx10 said:

Hi @CGP123

Sorry to jump into this loop.

My name is Kelly. I just accidentally found your website, and I couldn't help but notice the beautiful folding menu in the PC view. It looks so cool and seamless! I was wondering if you would be willing to share how you achieved this effect?

Thank you for your time, and I look forward to hearing from you : )

It is a plugin, but we can achieve it with custom code (but a lot of code). If you need help, you can create a new question on forum.

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
  • 2 months later...
On 7/25/2023 at 11:33 AM, Kellyx10 said:

Hi @CGP123

Sorry to jump into this loop.

My name is Kelly. I just accidentally found your website, and I couldn't help but notice the beautiful folding menu in the PC view. It looks so cool and seamless! I was wondering if you would be willing to share how you achieved this effect?

Thank you for your time, and I look forward to hearing from you : )

Kelly,

Thank you! this is from a course I took - https://standoutsquare.space/ It is a thorough coding course with a ton of info, but there are shorter tutorials for things like this, too. I highly recommend it!

Claire

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.