Jump to content

How do I make padding and title size smaller with custom css?

Recommended Posts

Hello.

Does anyone know what code to use to reduce the padding and title size on a product page in 7.1?

I'm trying to reduce the large gap between the title and product description. Also, the title itself is quite large and I'd like to make it slightly smaller. I've already played around with the font options to see what I could do there, but it's still consistently huge so I think custom CSS will help. 

We are keeping the price and add to cart button hidden since we are not going to be selling online for now. I've included a screenshot with the css code section shown. Unfortunately the website will not be live for several months so I can't share a link. 

I did try to use code to reorder the product details sections (lowering the hidden price to the bottom of description, above add to cart button, also hidden) but that doesn't change the spacing.

Please help!

Thanks in advance.  

sq-site_shrink-padding-and-title-size-question.jpg

Link to comment
  • Replies 8
  • Views 1.3k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

17 hours ago, GKG said:

I'm trying to reduce the large gap...We are keeping the price and add to cart button hidden since we are not going to be selling online for now.

I see you are using visibility:hidden to hide these elements. Although this will hide the elements, they will still take up the same amount of space in the page layout. To remove the elements so they do not take up any space you should use display:none instead 🙂

Did this help? Please give feedback by clicking an icon below  ⬇️

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Would you like your customers to be able to mark their favourite products in your Squarespace store?

Link to comment

Thank you @paul2009! Helpful. Do you know what code I should use to shrink the padding above the title? It'd be great if the product info was closer to the top of the image on desktop. On mobile the info shows below images which is great. But on desktop, the images are huge and the text to the right of it gets pushed to the middle of the image height. 

Link to comment
1 hour ago, GKG said:

Do you know what code I should use to shrink the padding above the title?

See if my earlier answer here helps:

Let me know how you get on. 

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Would you like your customers to be able to mark their favourite products in your Squarespace store?

Link to comment

Thanks @paul2009. I tried adding the below code from your previous thread but it doesn't change anything. I tried adding the display:none for review summary but that didn't change anything either. Is there something else I need to add? 

/* Hide Review Summary Text on PDP */
.ProductItem-details .reviewSummary {
  display: none;
}
@media screen and (min-width: 768px) {
  .tweak-product-basic-item-content-alignment-top .ProductItem-details, .tweak-product-basic-item-gallery-design-stacked .ProductItem-details {
    padding-top: 0;

Link to comment

Inspect to see what's taking up the space, or please share your website and password if applicable

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Nerd
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Website help <- send me your to-do list. From code to plugin to domain setup.
🧰 See the tools I use (contain affiliate links)
 Did I help? I like coffee (Thank you)

Link to comment

@melody495 unfortunately the site won't be live for a while so I don't have a link to share. But it appears from what Paul referenced above, there's automatically 60 pixels of padding above the product details (with or without review summary) and I'm not sure how to reduce it. I tried the code above but nothing worked. Any ideas?! 

Link to comment

Set up a password of your trial website and share the link and password please. So can see what's going on, otherwise have nothing to go on but guess!

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Nerd
e: melody@melodylee.tech


💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Website help <- send me your to-do list. From code to plugin to domain setup.
🧰 See the tools I use (contain affiliate links)
 Did I help? I like coffee (Thank you)

Link to comment
1 hour ago, GKG said:

I tried adding the below code from your previous thread but it doesn't change anything.

Please provide a link to the page and I'll take a look. If the site isn’t live, please see How to Post a Forum Question for guidance on how to provide a link to your site.  

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Would you like your customers to be able to mark their favourite products in your Squarespace store?

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.