Jump to content

Uneven padding to border around a Grid Image on hover

Recommended Posts

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 

Screen Shot 2023-02-13 at 14.48.08.png

Link to comment
  • Replies 8
  • Views 280
  • Created
  • Last Reply

Top Posters In This Topic

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

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

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

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

Link to comment

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

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

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

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

Link to comment

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).

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

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

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

Link to comment

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! 

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.