Jump to content

Page media zoomed in

Recommended Posts

Hi there

I'm using the jasper jin template and have various page blocks on my home page. When I'm in the backend on squarespace the media for each page looks correct, but when I view the published version all the images are zoomed in and cropped awkwardly. I've re-uploaded the images and can't find a way to fix it. Obviously this doesn't look good in my portfolio so any suggestions are appreciated! 

I've attached images, the first image is how it looks in the backend, the second image shows the zoomed in version.

Thanks,

Natalie

Screenshot 2023-01-13 at 10.46.56.png

Screenshot 2023-01-13 at 10.47.08.png

Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Thanks for sharing, I can see that you're using an older template in the York family and here an index grid:

https://support.squarespace.com/hc/en-us/articles/218211197-York-template-family?platform=v6&websiteId=6381f1ab7fa4241832915ff3#toc-thumbnail-layout

This is set up with 2 columns and a height  for each row, so the aspect ratio of the image containers is based on the screen width and therefore crops the image to fit into that container.

So on narrow screens it may look like this:

image.thumb.png.70511976501638acf08c796aa3227849.png

but on wide screens it looks like the image don't crop very much.

It looks like the image row height is dependant on a percentage of the screen height. You may be able to adjust the image row height to be a percentage of the width instead, which would help keep the ratio more consistent. A value somewhere around 20vw might be a starting point.

I hope that helps you understand what is happening.

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
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.