Tyrus

I finally got it with this code. /* For mobile screens */ @media only screen and (max-width: 767px) { .products .list-grid { display: flex; flex-wrap: wrap; justify-content: space-between; } .products .grid-item { width: 48%; } .ProductItem-gallery-slides-item img { object-fit: contain !important; } } /* For desktop screens */ @media only screen and (min-width: 768px) { .ProductItem-gallery-slides-item img { object-fit: contain !important; max-width: 100% !important; max-height: none !important; } } Please let me know if you think this is good or can be improved!

I tried to fix it myself using chat GPT and google. I came up with this code so far: @media only screen and (max-width: 767px) { .products .list-grid { display: flex; flex-wrap: wrap; justify-content: space-between; } .products .grid-item { width: 48%; } .ProductItem-gallery-slides-item img { object-fit: contain !important; } } It achieved everything I am looking for on mobile but now when I click into a product on my desktop version, the photo is a square and not its original shape. Almost there!

Also now the code is making the images on the desktop version appear as squares sadly

Thank you so much! That worked! Follow up question. I have the code in there for the issue above. Now how do I make the main product page have 2 rows instead of just one item at a time? I had it, but then somehow I lost the 2 collumns

Sure here it is! Keep in mind it's on Mobile https://www.tyrusxanthosphoto.com/prints

Hello, I am a photographer looking to solve a seemingly simple problem. My photos don't all share the same dimensions. I want to sell prints online and built out the Squarespace store however, on mobile when someone clicks on the product, they are shown the product in a square format (or any other pre-selected aspect ratio) when I want them to be able to see the entire photo as uploaded on the desktop version. Apparently, there is no option for this so I need to turn to code but have little experience in that. Please help!