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

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!

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?

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.

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

On 10/22/2022 at 3:42 PM, tuanphan said:

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

body.view-item .products.collection-content-wrapper {
    padding-top: 20px !important;
}

 

Fantastic! Thank you so much 🙂

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

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