Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

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 5
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 weeks later...

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?

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

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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