Reduce space between product details page and header

Site URL: https://www.laurentausend.com/

I'm trying to reduce the space between my product details pages and my header/footer. I'd rather not specify each section to reduce the margin and possibly code it in one go. Is that possible? Thanks

Hi @LaurenJoy,

Try adding this code within Design > Custom CSS:

.products article.ProductItem{padding-bottom:0px;padding-top:50px;}
@media only screen and (min-width: 769px) {
  .products article.ProductItem{margin-bottom:-200px;}
}

This should reduce the spacing for all your product pages in one go (and hopefully without affecting any other pages):

Hope this helps!
-Tyler

P.S. - here's something extra if you want to remove that scrollbar on your product gallery 😉

.ProductItem-gallery-thumbnails{overflow-x:auto!important;}

Hi 

Hoping you can help with reducing the large padded area at the top of the store and products page please...

Store: https://wvcharge.squarespace.com/waev-charge-store 

Example Product: https://https://wvcharge.squarespace.com/waev-charge-store/p/waev-charge-ev1 /waev-charge-store/p/waev-charge-ev1 

Images attached for reference. 

Hi @HG-Design,

You have an empty product navigation bar that's taking up some extra space on all your store pages. You can remove it by adding the following CSS from Design > Custom CSS:

.ProductItem-nav {
  display: none !important;
}

If needed, you can shrink the page's padding a bit further by adding the following CSS and modifying the number value:

.product-layout-side-by-side {
  padding-top: 2vw !important;
}

Hope this helps!
-Tyler

Thank you Tyler, that's work perfectly on the individual products page however there is still quite bit of padding above the image on the store (products gallery) page. Is there a way to reduce this slightly? 

On 4/14/2022 at 2:40 AM, HG-Design said:

there is still quite bit of padding above the image on the store (products gallery) page. Is there a way to reduce this slightly? 

Looks pretty good as is on my screen, but you could tweak it further with this code:

.page-section[data-section-id="625726cc3a16c8026eec4ae7"] {
  padding-top: 70px !important;
}

Hope this helps!
-Tyler

3 hours ago, tcp13 said:

Looks pretty good as is on my screen, but you could tweak it further with this code:

.page-section[data-section-id="625726cc3a16c8026eec4ae7"] {
  padding-top: 70px !important;
}

Hope this helps!
-Tyler

Thank you Tyler and apologies I was not clear but the padding I am trying to reduce is from the image to the first line of text as per the attachment. 

I have updated your code to the photo block ID but it doesn't seem to work. 

On 4/15/2022 at 2:00 PM, HG-Design said:

the padding I am trying to reduce is from the image to the first line of text as per the attachment. 

Ah. Try this then:

.page-section[data-section-id="625726cc3a16c8026eec4ae7"] .content-wrapper {
  padding-bottom: 0px !important;
}

Otherwise, you can try cropping the image. The remaining space is just transparency from the png.

Thank you @tcp13, that has worked perfectly!

Hi @tcp13,

I am trying to reduce the space between header and first section on every pages

How can I do that? Thanks! 

Sophie

@Phiso, can you share a link to your site?

Hi @tcp13

Thanks!

my site is still in the very early stages: https://accordion-dogfish-8dex.squarespace.com/accueil

@Phiso - you'll also need to make the site "public" or "password protected" from Settings > Site Availability. Otherwise, we still can't access the "private" site to take a look at your header spacing 🙂

@tcp13 sorry LOL

Password is thanksalot

On 4/27/2022 at 7:07 AM, Phiso said:

I am trying to reduce the space between header and first section on every pages

@Phiso - try adding this at Design > Custom CSS:

.page-section:first-of-type .content-wrapper{padding-top:3vmax!important;}

You can increase or decrease the "3" value to your liking.

Hope this helps!
-Tyler

@tcp13

Thanks a lot Tyler! This is amazing!

You are wonderful!

Hi. I'm trying to reduce space between the search box and the product navigation on this page:

http://shreckhise.squarespace.com/products

Anyone have a code?

Thanks!

10 hours ago, sarah7 said:

Hi. I'm trying to reduce space between the search box and the product navigation on this page:

http://shreckhise.squarespace.com/products

Anyone have a code?

Thanks!

Add to Design > Custom CSS

/* Search box - navigation */
section.products.collection-content-wrapper.products-list {
    padding-top: 0px;
}
ul.nested-category-children {
    padding-top: 0px !important;
}

None of the code here worked for me to ADD space between the header and product details (SS 7.1).  @tcp13 gave me the following css and it worked.

.pdp-gallery{
	margin-top: 80px !important;
}

Anyone still here? I'm trying to do the same as the original question here: remove the large space between the header and the products here: https://www.kimberlyessex.com/audio-library

Additionally, I'm wondering if there is any way to adjust font sizes on this page? The category font seems strangely small (I'd like to make that larger) and the product title font seems strangely large (I'd like to make that smaller.

On 8/16/2023 at 4:07 PM, kimkim said:

Anyone still here? I'm trying to do the same as the original question here: remove the large space between the header and the products here: https://www.kimberlyessex.com/audio-library

Additionally, I'm wondering if there is any way to adjust font sizes on this page? The category font seems strangely small (I'd like to make that larger) and the product title font seems strangely large (I'd like to make that smaller.

It is fine to me. Which space are you referring to?

On 8/19/2023 at 3:11 AM, tuanphan said:

It is fine to me. Which space are you referring to?

Oh, so sorry. When I didn't get an answer I made a new post and received a solution at the link below. So sorry for not updating. Thank you for asking.