Jump to content

reduce height and bottom padding of auto gallery carousel block

Recommended Posts

How do you have the gallery set up?

Gallery blocks are in Squarespace FE are a pain, it may be better if you used a classic editor section, or even better this method:

https://www.will-myers.com/articles/scrolling-logo-in-squarespace

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Have you used some CSS to control the image height?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
2 minutes ago, Ziggy said:

Have you used some CSS to control the image height?

this is what i've used:

 

//logo reel//
body#collection-6639eeafa20e736e45ab9e26 .sqs-gallery.sqs-gallery-design-strip img {
       max-height: 150px !important;
       overflow: hidden !important;
   }
   
#block-yui_3_17_2_1_1716456735026_63874 .sqs-gallery-design-strip-slide {
  opacity:50%;
  padding: 0px 30px 0px 30px!important;
  margin-bottom:0;
   transition: all 0.3s ease;
}

#block-yui_3_17_2_1_1716456735026_63874 .sqs-gallery-design-strip-slide:hover {
  opacity:100%;
  transition: all 0.3s ease;
}

Link to comment

Have you tried adding the same max-height to 

#block-yui_3_17_2_1_1716456735026_63874 .sqs-gallery-design-strip-slide 

as well as the img?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
52 minutes ago, moonlitdesign said:

i diddd yeah, just added it back in to double check but it's not done anything 

You would have to add the code, then edit the page layout after as it won't change automatically.

You could also try adding a max height to the FE block itself.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
1 hour ago, Ziggy said:

You would have to add the code, then edit the page layout after as it won't change automatically.

You could also try adding a max height to the FE block itself.

I tried that too! blooming nightmare haha. in the end i've settled for margin-bottom: -30%; on the whole section. not the best but we'll see if we have any problems! 

Link to comment
57 minutes ago, moonlitdesign said:

-30%; on the whole section

Negative margins bring me out in a cold sweat, scary stuff!

That Will Myers solution is pretty good...

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

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.