Jump to content

Too much space below image on product detail page

Recommended Posts

Site URL: https://grape-shallot-axh7.squarespace.com/

I'm on 7.1. fluid engine - password: GraciousPony

I've used the following code to ensure that paintings are not cropped on the product detail page and that the image aligns to the top of the section: 

img.ProductItem-gallery-slides-item-image { object-fit: contain !important; }
.tweak-product-basic-item-gallery-design-slideshow .ProductItem-gallery-slides-item {height:auto;}

With portrait orientation images like this one 
the space below the content is fine - but on landscape orientation detail pages like this: 

there is an excess of space.  

I can't locate the css to reduce that space so that it conforms better to the adjusted height of the image. I've tried height:auto; on .ProductItem-gallery, .ProductItem-gallery-slides and on .ProductItem .ProductItem-summary and none of those work.  

Any ideas for this?

Link to comment
On 8/14/2022 at 10:53 AM, mbaydesign said:

Yes, exactly. 🙂

Try adding to Design > Custom CSS

.ProductItem {
    padding-bottom: 0px;
section#pdp {
    padding-bottom: 0px;
.tweak-product-basic-item-gallery-aspect-ratio-34-three-four-vertical .ProductItem-gallery-slides:before {
    padding-bottom: 100% !important;


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

Oh, oops - I thought that was it but it's not.  It's great on the landscape orientation image, but it cuts off the bottom of the portrait orientation: 

like this one 

Leaving off the .tweak-product, restores the full image. So, currently, I'm just using the two 0px padding-bottom which eliminates the bulk of that extra space.  It's definitely better than before. 🙂

Edited by mbaydesign
amplifying answer
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.