Jump to content

Adjusting padding between image block and text within a section

Recommended Posts

Hi! So for my portfolio homepage, I have staggered image blocks in different sizes with captions added using a text block. Every section has different block padding in order for the entire image to be shown/fit. With that said, the padding in between the images and caption texts are different between every image. It's very subtle but the difference is there.

Is there a way I can adjust the padding between them so it is consistent without adjusting the way the images are presented? This is only needed for the homepage. 

https://harp-cobalt-g6lj.squarespace.com/
Password: blueberry2

Much appreciated!

Link to comment

It looks like you've customized the row-gap and column gap on those sections, (5px & 7px, and, 8px & 3px respectively), this explains the 3px difference in padding. If you adjusted this to be the same, you will have the same padding.

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!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

The problem is I cannot adjust the row-gap and column gap to be same or else it will crop the images in a strange way. I have the images on "fill" as when I use "fit" it leaves space around the edges of the image and does not allow the text to align correctly. 

Is there a way to adjust the padding while leaving the row and column gaps the way it is in each respective sections? 

Edited by jjk291
Link to comment
10 minutes ago, jjk291 said:

Is there a way to adjust the padding while leaving the row and column gaps the way it is in each respective sections? 

No, it's not padding, it's the row gap that is causing the space, so you need to fix that. 

Instead of having the images set to fill (which causes cropping issues that I can see on smaller screens) set them to fit, and then change the alignment to bottom to give an even space to the text.

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!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
4 minutes ago, jjk291 said:

that works!! thanks so much!!! didn't realize there was a way to align to bottom. 

Glad that worked for you!

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!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Ive come across a new problem now using this method at small screen sizes. The text will not align with the image. and when I have the image fit right to have it align with the text, everything is pushed to the right of the title which looks strange. See attached. Is there a solution to this besides centering the text? 

Screen Shot 2023-03-31 at 1.33.52 PM.png

Screen Shot 2023-03-31 at 1.33.23 PM.png

Link to comment

Have you adjusted the mobile layout? You can make that block taller so it fills more space, and adjust the left/right + top/bottom alignment.

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!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Strange, I can't seem to replicate that view to know what's going on there.

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!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

It shows up when you make the desktop window smaller.

It seems like the responsive design is formatting it strangely when its smaller. Is there way to force it into mobile mode before it gets to the size that makes it misaligned? 

Link to comment

I'm changing the screen size in every way, can't see it doing that.

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!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

From that image it looks like you need to leave a row of space at the image.

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!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox 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.