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 Improve your online store with our extensions.About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation 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.Buy me a coffee 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? Improve your online store with our extensions.About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation 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.Buy me a coffee 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