Jump to content

Image size

Recommended Posts

  • Replies 2
  • Views 410
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Hi @Lian, this is a pretty common responsive design issue stemming from the width being different when you're editing and viewing, and the problem get more pronounced as the screen narrows (before jumping to mobile view). It is occurring because you have fixed ratio images and fixed px padding around the images, as the screen width gets smaller the images shrink to fit the space, but the padding remains the standard 17px around each block, and you see a different in heights. Using a gallery grid is normally a good way to fix this, but probably wont offer you the same ability to add the hover effect that you have. Moving to Fluid Engine would allow you to have the images fill a space within the grid stopping them from becoming misaligned, but you would have to have a different solution for the hover (probably a text block filling the same space plus a background and then a hover effect applied to the blocks).

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

Zygmunt Spray
Squarespace Website Designer
Contact me: 
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.