Jump to content

Gallery block top padding too big.

Recommended Posts

Hi, 

I'm still in the building stages of my site and I've been trying a few codes from this forum to try fix this issue, but none seem to work. 

I'll be using this images block across my site, but it leaves a big unneeded padding gap at the top of each gallery.

Is there any way to reduce the padding??

Any help would be great. 

Screenshot 2022-11-09 at 16.36.08.png

Link to comment

Happy to help you look into this. Can you share you website URL and site wide password? 

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

Try adding this to your Custom CSS:

.gallery-masonry[data-width="full"] {
    padding: 3vw;
}

Let me know if that works.

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

Try this for grid gallery:

.gallery-grid[data-width="full"] {
    padding: 3vw;
}

Header, try this:

.header-title-nav-wrapper {
    flex: 1 0 80%;
}
.header-layout-nav-center .header-title {
    width: 15%;
    flex: 1 1 15%;
}
.header-layout-nav-center .header-nav {
    width: 65%;
    flex: 1 1 65%;
}
.header-layout-nav-center .header-actions {
    width: 15%;
}

It's readjusting the size of each of the three containers in the header - logo - nav - button/actions.

Let me know if that works, and a thumbs up if it's been helpful is always appreciated, thanks!

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

Thanks very much for this Ziggy. 

The header code worked very well i just tweaked it a little and very happy with it. 

The grid gallery code, just pushes it to full bleed, and on second review, it does this with the masonry gallery too. Is there a way we can keep the same width (site width), but just remove the top padding. So moving the whole section up??

Thanks again for your help, 

Jack 

Edited by JackJohns
Link to comment

Of course, change padding:3vw; to padding-top:3vw;

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

You can do that or start a new thread, often better if the title no longer matches the request, and you should be able to get help.

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.