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: ;
}

Help?!

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 helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? 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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 months later...

For some reason the code in this thread isn't working on my web site.  I'm trying to increase the gap between the header and product details.  I can't find anything that moves that main content down on every product page.  I have the product details section set to "Wrap" instead of "Simple", because on mobile "Simple" was putting the add to cart button above the description.  When it's set to "Wrap" it moves the product details all the way up against the header.  I can't win.

https://www.hcfreezedry.com/shop-all/p/freeze-dried-strawberry-shortcake-bites

Edited by badcrc
Link to comment
On 2/21/2023 at 5:51 AM, badcrc said:

For some reason the code in this thread isn't working on my web site.  I'm trying to increase the gap between the header and product details.  I can't find anything that moves that main content down on every product page.  I have the product details section set to "Wrap" instead of "Simple", because on mobile "Simple" was putting the add to cart button above the description.  When it's set to "Wrap" it moves the product details all the way up against the header.  I can't win.

https://www.hcfreezedry.com/shop-all/p/freeze-dried-strawberry-shortcake-bites

Add to Design > Custom CSS

body.view-item figure.pdp-gallery {
    padding-top: 2vw !Important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.