Jump to content

Huge white space above Product Detail Images on mobile needs removing

Recommended Posts

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

Link to comment
  • 2 weeks later...
  • Replies 1
  • Views 570
  • Created
  • Last Reply
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?

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.


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