Jump to content

Masonry Grid - CSS to Prevent Image Cropping

Recommended Posts

Site URL: https://nalanihmelo.com

Hi!

We are using the masonry grid gallery section on the homepage of a photography website, and it looks great. However, we are experiencing trouble on two of the subpages — when we try to place images in the masonry grid style on these subpages, for some reason, the images are being cropped. We would like to prevent the images from cropping. 

These are the subpages:

https://nalanihmelo.com/portraits-gallery

https://nalanihmelo.com/travel

The gallery sections used on these subpages are currently set to SIMPLE to avoid the strange auto-cropping. (When we switch the galleries on these pages to masonry view: Some of the portrait images, for example, are being cropped to horizontals. I've attached a screenshot of the PORTRAITS subpage to show how those images are being cropped in the Masonry view.)

Again, we are using the masonry on our homepage, and the images there are not being cropped.

Thank you for your help!

Screen Shot 2021-09-09 at 11.20.45 AM.png

Link to comment
  • Replies 6
  • Views 835
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 weeks later...
On 9/24/2021 at 5:25 AM, chavous_writes said:

Hi @tuanphan!

The problem is, we do not want to use a Simple Grid layout. We would like to use the Masonry Grid, where the images do not appear in straight rows ... but as described in the original post, for some reason the photos are being cropped.

I'm looking for CSS to prevent the crop, as shown in the screenshot. Can you help?

Can you share link to page where you added masonry? We can check easier

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

@tuanphan The links are in the original post. I've copied them here:

https://nalanihmelo.com/portraits-gallery

https://nalanihmelo.com/travel

The website is live, and I cannot put these galleries into masonry view because the images get cropped. Please see the screenshot to see how the grid appears when it is in masonry. Thank you.

I'm just looking for a code that will eliminate the automatic crop on masonry view (see screenshot in original post) and show every image at its original ratio. Masonry view usually does this, but seems to be glitching on these subpages for some reason.

Link to comment
On 10/1/2021 at 10:21 PM, chavous_writes said:

@tuanphan The links are in the original post. I've copied them here:

https://nalanihmelo.com/portraits-gallery

https://nalanihmelo.com/travel

The website is live, and I cannot put these galleries into masonry view because the images get cropped. Please see the screenshot to see how the grid appears when it is in masonry. Thank you.

I'm just looking for a code that will eliminate the automatic crop on masonry view (see screenshot in original post) and show every image at its original ratio. Masonry view usually does this, but seems to be glitching on these subpages for some reason.

Hi,

You can duplicate the page & share duplicated page url, we can check easier

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
  • 11 months later...

I have the same issue with cropping. It seems that portfolio pages help, but now I am running into Google Search Console issues as they don't like me having redirects. This seems like a simple issue to solve.

I am running Squarespace 7.1. I have no live or hidden pages with cropped galleries ready to show - I've avoided them because they look so bad.

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.