Changing the aspect ratios for products on mobile

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! 

Hi,

Can you share link to page where you have problem? We can check easier

Sure here it is! Keep in mind it's on Mobile 

https://www.tyrusxanthosphoto.com/prints

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 

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

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! 

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! 

Yes. That code looks good

Hi!

I'm having the same issues! **On mobile**
and I can't get any of the above codes to work.. Help!?

https://octopus-pumpkin-nn9x.squarespace.com/config/

6 hours ago, EnigmaFlame2311 said:

Hi!

I'm having the same issues! **On mobile**
and I can't get any of the above codes to work.. Help!?

https://octopus-pumpkin-nn9x.squarespace.com/config/

The site is private. We can't access it.

Can you follow this to share url?

hello! I am having this same issue on mobile as well - @tuanphan would you be able to help me with code for this issue? Specifically on the individual product pages, like this one?

https://www.annguideramatey.com/ireland/p/emeraldsandsaphires

On 1/29/2024 at 8:22 AM, emiehughes said:

hello! I am having this same issue on mobile as well - @tuanphan would you be able to help me with code for this issue? Specifically on the individual product pages, like this one?

https://www.annguideramatey.com/ireland/p/emeraldsandsaphires

 

I see you solved with this code?

@media only screen and (min-width: 768px) {
    .ProductItem-gallery-slides-item img {
        object-fit:contain !important;
        max-width: 100% !important;
        max-height: none !important
    }
}