Blank space at bottom of Product Page

There is a large gap and blank white space at the bottom of each of my product pages. How do I get rid of it?

Please post the URL for a page on your site where we can see your issue.

A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

We can then take a look at your issue.

You may find How to post a forum question post useful.

Hi @creedon! Site is live at lamsa-bekaa.com but the issue is only on the store individual products page.

I have a landing page set up so just go to lamsa-bekaa.com/store to avoid it. 

That spacing is controlled by the Site Margin setting.

If you want the spacing on the product detail page to be different than Site Margin you would need custom CSS.

@creedon unfortunately that changes the margin for the entire site and I only need to adjust the bottom margin on the product pages. Is there a CSS for that?

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page. Please see per-page code injection.

<style>

  .tweak-products-width-full .products.collection-content-wrapper {

    --padding : 4vw;
    
    padding-bottom : var( --padding );
    padding-top : var( --padding );
    
    }
    
  </style>

Let us know how it goes.

@creedonThat doesn't seem to do it 😕  Not noticing any change with that code.

Quote

That doesn't seem to do it 😕  Not noticing any change with that code.

I don't see the code installed.

@creedon Ah, sorry. I removed it because it wasn't working but just added back in!

I have updated my posted code.

@creedon Still doesn't effect that chunk of padding at the bottom...

Quote

Still doesn't effect that chunk of padding at the bottom...

You have not replaced the code on your site with my new code.

@creedon I'm using this code. Is there a different one? 

<style>

  .tweak-products-width-inset .products.collection-content-wrapper {

    --padding : 4vw;
    
    padding-bottom : var( --padding );
    padding-top : var( --padding );
    
    }
    
  </style>

10 minutes ago, Web_Solutions said:

THIS WORKED! THANK YOU SO MUCH!  I tweaked the 4vw to 0 and it's PERFECT.

Add these code on Custom CSS panel in Website > Utilities > Website Tools > Custom CSS.

@media screen and (min-width: 576px) {
  .collection-type-products .post-type-store-item div.products.collection-content-wrapper {
    padding-top: 0 !important;
    padding-bottom: 4vw !important;
  }
}

 

Quote

I'm using this code. Is there a different one? 

Yes your code uses inset. My updated code uses full which replicates the code SS uses for that element.