Adjusting padding between image block and text within a section

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!

Attached is a marked up screen shot for clarification 🙂 

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.

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? 

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.

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

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!

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? 

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.

The mobile layout looks great - see attached.

its the desktop version for small screen that looks bad. it also has the misalignment when viewing on my iPhone turned horizontally. 

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

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? 

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

hmmm it's happening to me on 3 different Mac devices. 

On my desktop and see attached my iPhone when its turned horizontally 

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