eliamaldire Posted August 6, 2022 Share Posted August 6, 2022 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
Solution paul2009 Posted August 6, 2022 Solution Share Posted August 6, 2022 (edited) 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 August 7, 2022 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
eliamaldire Posted August 7, 2022 Author Share Posted August 7, 2022 That worked perfectly, thank you so much! Link to comment
sjd Posted August 7, 2022 Share Posted August 7, 2022 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
paul2009 Posted August 7, 2022 Share Posted August 7, 2022 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
marshallkylex Posted May 4 Share Posted May 4 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 Link to comment
tuanphan Posted May 8 Share Posted May 8 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment