Uneven padding to border around a Grid Image on hover

Hi

I am recreating the look and functionality of my portfolio based homepage using a simple grid page which I will overwrite as the homepage (in order to move away from my homepage being a portfolio page). 

I have recreated this almost exactly using variations of the code which worked for my portfolio page, however the padding around the border on hover is uneven at the bottom. 

I have included the code I used for my new simple grid gallery homepage and screenshot (this is not a live/linked page currently) and the code for the original portfolio homepage to show the difference. 

Any help in making the bottom padding / border the same all around the image would be great! 

Code for border to appear on hover on my new simple grid gallery page where the bottom of the border is not even: (not linked/live)

.gallery-grid-item:hover {
  border: 1px solid #ff0000 !important; 
 padding: 5px !important; background:transparent!important; } 

figcaption {
  padding: 0px !important; }

Code for border to appear on my original Portfolio page which works perfectly with even border all around the image: (live)

.grid-item:hover .grid-image{
 border: 1px solid #ff0000 !important; }

.grid-item .grid-image-inner-wrapper{
  padding:5px;}

Thanks,

Charlotte 

Can you share your website URL and this page? Thanks!

Hi,

The link to the live website is: https://www.workbyline.co.uk/

I'm not sure if you can view the unlinked page I'm having issues with: https://echidna-gardenia-fcb4.squarespace.com/work-2

Thanks,

Charlotte 

I can't see that page, it's not enabled (not live), can you add a password to that one page and enable it?

Hi,

I've just enabled this page and the password is: password - let me know if you can see this ok and thanks for taking a look! 

Do you have some other code that is causing the image to resize?

I think the spacing is coming from the way that the images fill the allocated space (or in this case not quite fill).

Hi,

Thanks for looking at this. I can't see any code which effects the gallery images anywhere. This was a new gallery page which was set-up using the simple grid and images were uploaded via Squarespace gallery images. The only coding is for the border and hover etc. 

Let me know if you have any other thoughts - this one has me completely puzzled! 

On 2/14/2023 at 10:15 PM, css_charlotte said:

Hi,

Thanks for looking at this. I can't see any code which effects the gallery images anywhere. This was a new gallery page which was set-up using the simple grid and images were uploaded via Squarespace gallery images. The only coding is for the border and hover etc. 

Let me know if you have any other thoughts - this one has me completely puzzled! 

Try disable Gallery Caption on this gallery & check again

Hi,

Just tried this but the uneven border at the bottom remains the same - and the project description on hover disappears when captions are turned off too. 

Any other thoughts would be greatly appreciated!

Thanks in advance!