Jump to content

different space between header on product catalogue and product details page?

Recommended Posts

Site URL: http://www.dotandhana.co.uk

I'm trying to rearrange the spacing on my website so that the space between my header and the individual product on my product detail pages is smaller, but anything I try also makes the space between the header and the full product catalogue page smaller too. Is there anyway to move those blocks independently of each other?

I've tried customising the CSS mostly based on previous answers found on this blog, but can't find the answer to this specific problem.

When my product catalogue looks right, my product details are too far down the page, I'd like to move the images and details up by the width of the blue block but keep the product catalogue page spacing as it is in the image. If it's possible to do it without making the page jump to the spacing after loading, even better (it's like it loads in the old spacing, then jumps to the new spacing which is annoying.)

This is the code I'm currently using which makes the spacing on the product catalogue page good but the spacing on the product detail page too far apart.

.products.collection-content-wrapper {
  padding-top: ;


PS sorry my site isn't live yet so that link won't work!


Screenshot 2022-10-17 160344.jpg






Screenshot 2022-10-17 160456.jpg


Edited by dothana
Link to comment

Can you make your website password protected, and share the site wide password here?

Are all the images the same aspect ratio? or are they a mix of landscape, portrait, and square?

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/17/2022 at 11:46 PM, dothana said:

Thank you for your reply.

I set a password - dot&hana99. Bear in mind that I'm a total rookie if any of the custom code I've hashed together is messy!

I'm pretty sure all my product images are square.

Add this to Design > Custom CSS (This code run on individual products only)

body.view-item .products.collection-content-wrapper {
    padding-top: 20px !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.