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 4
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

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

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

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?  

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

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.