Jump to content

Change aspect ratio of mobile gallery

Recommended Posts

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

 

 

 

 

Edited by dgarland
updated issue
Link to comment
  • Replies 6
  • Views 736
  • Created
  • Last Reply

Top Posters In This Topic

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 🙂

Edited by dgarland
Link to comment
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?

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

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.

 

 

 

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.