Jump to content

Working with extremely landscape and extremely portrait images

Recommended Posts

Site URL: https://fox-magnolia-xkg2.squarespace.com/

This site has some products images that are widescreen (very landscape) and also images that are very portrait (very narrow and tall).

I am managing to keep this issue in check using square thumbnails for the product listings but for individual products on mobile particularly some of the images are cropping really badly whereas they need to be shown in full.

Good examples of this extreme are: https://fox-magnolia-xkg2.squarespace.com/garden-birds/hungry%20brood (landsape)


https://fox-magnolia-xkg2.squarespace.com/garden-birds/spring%20willow (portrait).

I have tried all the aspect ratio settings for the images but none of them solves the problems in all cases.

What's the best way of solving this problem?




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

Thanks. Had a look at this but whatever I do within the Squarespace settings I can't get it to work.

I end up with the heavily cropped version I've attached which is obviously useless to the user looking at the site instead of the full image. 


Screenshot 2020-05-15 at 07.56.30.png


Link to comment

Is there no CSS hack to make this work? Otherwise I'm going to need to re-upload all the images as square with the corresponding background with the actual image sitting in the middle of it either horizontally or vertically.

Link to comment

This may sound a bit to simple, but with mobile sometimes it depends on which way the phone is turned. Some sites tell people to do just that, turn you phone to landscape to view a landscape and portrait to view a portrait. The site will adjust when the phone is turned. The images are larger this way also. A bit of text that gives a "for best viewing" hint or something to that effect could be added.   Just a thought. 


Link to comment


This topic is now archived and is closed to further replies.

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