Huge white space above Product Detail Images on mobile needs removing

Site URL: https://octagon-pelican-ay36.squarespace.com/home/p/diego-maradona

Hi @tuanphan,

I've noticed that you've been very helpful in helping with displaying Product Detail Images so I was wondering if you'd be able to help me?

If you click the site URL I have provided and view on mobile you can see that there is a huge white space before the image of my product. I need this removing. Any ideas for a CSS code injection?

I have been playing about with this based on responses you have given to other people having similar issues and I've got what you can see out of it so far. The image is displaying perfectly. But I need that huge white space above it removing and I can't for the life of me figure out how to get rid of it!

It's fine on the desktop version of my site, it's only happening on mobile.

The current code injection that I have for this is the following which is creating this:

    .ProductItem-gallery-slides-item {
        position: static;
        height: auto;
        overflow: initial
    }

The image as it is is perfect, and so are all the others on my other products as I need the image height to differ for each product and not be forced into an aspect ratio as this is not needed for my product images and Squarespace seem to want to force people to use it. I just need that white space above it removing on the mobile view.

Your help would be truly amazing!

Cheers,

Pawel

On 4/5/2021 at 6:17 AM, Pawel2021 said:

Site URL: https://octagon-pelican-ay36.squarespace.com/home/p/diego-maradona

Hi @tuanphan,

I've noticed that you've been very helpful in helping with displaying Product Detail Images so I was wondering if you'd be able to help me?

If you click the site URL I have provided and view on mobile you can see that there is a huge white space before the image of my product. I need this removing. Any ideas for a CSS code injection?

I have been playing about with this based on responses you have given to other people having similar issues and I've got what you can see out of it so far. The image is displaying perfectly. But I need that huge white space above it removing and I can't for the life of me figure out how to get rid of it!

It's fine on the desktop version of my site, it's only happening on mobile.

The current code injection that I have for this is the following which is creating this:

    .ProductItem-gallery-slides-item {
        position: static;
        height: auto;
        overflow: initial
    }

The image as it is is perfect, and so are all the others on my other products as I need the image height to differ for each product and not be forced into an aspect ratio as this is not needed for my product images and Squarespace seem to want to force people to use it. I just need that white space above it removing on the mobile view.

Your help would be truly amazing!

Cheers,

Pawel

Hi. It looks like you solved this?