dothana Posted October 17, 2022 Share Posted October 17, 2022 (edited) 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! Edited October 17, 2022 by dothana Link to comment
Ziggy Posted October 17, 2022 Share Posted October 17, 2022 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! 📈 SEO Space (Referral link) Ⓜ️ Will Myers' Plugins & Tutorials (Referral link) 🔌 Ghost Squarespace Plugins (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
dothana Posted October 17, 2022 Author Share Posted October 17, 2022 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. Link to comment
tuanphan Posted October 22, 2022 Share Posted October 22, 2022 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; } dothana 1 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
dothana Posted October 24, 2022 Author Share Posted October 24, 2022 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 🙂 tuanphan 1 Link to comment
badcrc Posted February 20, 2023 Share Posted February 20, 2023 (edited) 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 February 20, 2023 by badcrc Link to comment
tuanphan Posted February 25, 2023 Share Posted February 25, 2023 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment