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

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.  

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  ⬇️

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. 

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. 

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;

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

@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?! 

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!

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.