Change aspect ratio of mobile gallery

So I have a gallery I am setting up using gallery grid with a ratio of 1:1

all looks good on the desktop side.

On the mobile side, I added some code to make it only display 1 column at a time and that is working perfect however I would like the aspect ratio on mobile to be the actual aspect ratio of the image. Right now they are displaying in the 1:1 ratio which is cropping them.

My end goal is to disable Lightbox on mobile as the full image will already be displayed so there will be no need for it.

Is that something anyone is able to help with?

This is the code I used to get it 1 column...

// 1 Image Per Row On Mobile //

@media only screen and (max-width: 640px) {
  .gallery-grid-wrapper {
    grid-template-columns: 1fr !important;
    grid-gap: 12px !important;
  }
}
// 1 Image Per Row On Mobile //

www.dgarl.land

password - plastic

Can you share link to page where you use Gallery Grid?

I see on homepage, you are using Gallery Masonry

So the homepage is ok.

its the gallery's that are in my nav menu…

here is a direct link to one if them…

https://www.dgar.land/longexposure

so the desktop version is set how i want however for the mobile version i would like the images to be stacked but not in the 1:1 ratio. 
 

i would like them to be stacked and show their true ratio… exactly how it looks on the mobile homepage with the masonry gallery.

hopefully that makes sense 🙂

On 3/12/2023 at 10:42 PM, dgarland said:

So the homepage is ok.

its the gallery's that are in my nav menu…

here is a direct link to one if them…

https://www.dgar.land/longexposure

so the desktop version is set how i want however for the mobile version i would like the images to be stacked but not in the 1:1 ratio. 
 

i would like them to be stacked and show their true ratio… exactly how it looks on the mobile homepage with the masonry gallery.

hopefully that makes sense 🙂

The url doesn't exist now. Can you check it again?

Sorry about that…

ive done some changes since i first made this post…

here is a link to one of the galleries.

https://www.dgar.land/abstract

Add to Design > Custom CSS

.gallery-grid-wrapper {
    grid-template-columns: repeat(1,1fr) !important;
}

So i actually already have that code added in and the 1 row gallery on mobile is working perfect however the ratio is still 1:1 for the photos.

On desktop, i have the gallery's setup as "gallery grid simple" in 1:1 square ratio. For mobile, i was hoping that i could display the the photos in their true ratio. As of right now, on mobile you see the image's in 1:1 and and can only see the full image when you tap on it which opens it up in lightbox.

I want to eventually disable lightbox on mobile and my hope is that the images could be display in their true ratio instead of 1:1.

Hopefully that makes sense.