Jump to content

Product images cropped in mobile version

Go to solution Solved by paul2009,

Recommended Posts

Site URL: https://www.maldire.com/

My website has the products in the lovely gallery mode "wrap" when looking at the desktop version, here is an example:

https://www.maldire.com/shop/p/lady-hillingdon-basic

When I go to the phone version it becomes a gallery slideshow badly cropped. I tried using this custom CSS but it doesn't make any changes:

/* Mobile Product Image */
@media screen and (max-width:767px) {
img.ProductItem-gallery-slides-item-image {
    object-fit: contain !important;
}
}

I just want the images with the full height and no crop.

Any ideas?

Thanks

Link to comment
  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution

The 'Wrap' PDP Layout has separate layouts for desktop and mobile, so you'd need to add this to Design > Custom CSS instead:

img.pdp-gallery-slides-image {
    object-fit: contain!important;
}

 

Edited by paul2009

About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!
If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.
Improve your online store with our extensions.

Link to comment

Hi,    

On 8/6/2022 at 1:18 PM, paul2009 said:

The 'Wrap' PDP Layout has separate layouts for desktop and mobile, so you'd need to use:

img.pdp-gallery-slides-image {
    object-fit: contain!important;
}

 

Hi Paul2009,

I'm having similar issues to eliamaldire. My url is : www.lulutoddler.com.

My product images are cut off at the top when viewed on a mobile. It does this on all the images but I am most concerned about the ones on my shop section when you click on the product. Is there a code you could please give me to stop this? If so would I have to add this code for each product ? Any help would be greatly appreciated. Many thanks.

Link to comment
31 minutes ago, sjd said:

My product images are cut off at the top when viewed on a mobile.

What happened when you tried the same CSS?  

About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!
If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.
Improve your online store with our extensions.

Link to comment
  • 8 months later...
On 5/4/2023 at 11:55 AM, marshallkylex said:

I'm having this same issue with the mobile product image gallery. I tried copy/pasting the code in custom CSS but it doesn't seem to do anything.

 

https://desertwillowhome.com/shop/p/benito-sofa

Try this code

img.ProductItem-gallery-slides-item-image {
    object-fit: contain !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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

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.