Jump to content

Reduce space between product details page and header

Recommended Posts

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):

image.thumb.png.9a5323ab45ef2b1262b81afb636a89d8.png

Hope this helps!
-Tyler

 

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

image.png.3bee4e6d23e2b93501da127f41af0bde.png  

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

image.png

Edited by tcp13

Hey, I’m Tyler. 👋 I’ve been a professional Squarespace user since 2016. I’m a recovering startup founder, currently on sabbatical after selling my Squarespace business. I now spend my free time working on weird side projects and half-baked ideas.

Link to comment
  • 1 year later...

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

Edited by tcp13

Hey, I’m Tyler. 👋 I’ve been a professional Squarespace user since 2016. I’m a recovering startup founder, currently on sabbatical after selling my Squarespace business. I now spend my free time working on weird side projects and half-baked ideas.

Link to comment
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? 

image.thumb.png.da65023b7b7d4aedec0121f5f1945cdd.png

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

Hey, I’m Tyler. 👋 I’ve been a professional Squarespace user since 2016. I’m a recovering startup founder, currently on sabbatical after selling my Squarespace business. I now spend my free time working on weird side projects and half-baked ideas.

Link to comment
3 hours ago, tcp13 said:

image.thumb.png.da65023b7b7d4aedec0121f5f1945cdd.png

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. 

Screenshot 2022-04-15 at 6.58.24 pm.png

Link to comment
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.

Edited by tcp13

Hey, I’m Tyler. 👋 I’ve been a professional Squarespace user since 2016. I’m a recovering startup founder, currently on sabbatical after selling my Squarespace business. I now spend my free time working on weird side projects and half-baked ideas.

Link to comment
  • 2 weeks later...

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

Hey, I’m Tyler. 👋 I’ve been a professional Squarespace user since 2016. I’m a recovering startup founder, currently on sabbatical after selling my Squarespace business. I now spend my free time working on weird side projects and half-baked ideas.

Link to comment

@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 🙂

image.png.d4b4967498715edb32eaf759a67daa17.png

Hey, I’m Tyler. 👋 I’ve been a professional Squarespace user since 2016. I’m a recovering startup founder, currently on sabbatical after selling my Squarespace business. I now spend my free time working on weird side projects and half-baked ideas.

Link to comment
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

Hey, I’m Tyler. 👋 I’ve been a professional Squarespace user since 2016. I’m a recovering startup founder, currently on sabbatical after selling my Squarespace business. I now spend my free time working on weird side projects and half-baked ideas.

Link to comment
  • 1 month later...
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;
}

 

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.