Jump to content

Reduce space between Price and Product Details on Product Page (Mobile)

Recommended Posts

Hi everyone,

I'm looking for some help with my product details pages, I have this issue (photo below):

I need to reduce the space between the product price and the product description for mobile pages, it's fine on desktop.

Thanks a lot for all the upcoming help!

pic.jpg

Edited by celineag
correction
Link to comment

It appears that you've got the quantity set to visibility:hidden; if you want to close that gap you need to set it to display:none; like this:

.product-quantity-input {
    display: none !important;
}

Generally I'm not completely sure what you're trying to do, apart from removing the ability to add to cart. I'm guessing you already have Custom CSS, so correcting that would be the most important thing to do.

This should help, if it doesn't try adding to the very end of the Custom CSS:

.tweak-product-basic-item-gallery-design-slideshow .ProductItem-gallery-thumbnails {
    margin-bottom: 2vh;
}
.ProductItem-details .ProductItem-product-price {
  margin-bottom: 0px;
}

 

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment
On 10/20/2022 at 5:24 PM, celineag said:

Perfect!! It worked! 

Thanks a lot for your help!

Another question, is it possible to show the tags of the product on the product page?

Not possible. You can consider using Text Block to add it manually.

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.