Jump to content

Removing white space / moving content up on product detail page

Recommended Posts

Site URL: https://nectarine-turbot-596s.squarespace.com/store-1/p/peperbus-zwolle

Hello everyone,

I'm struggling to remove some whitespace and subsequently move some content upwards (see picture).


For example, I want to align the product thumbnail and product title. I also want to move everything in total upwards so the gap between the header and the breadcrumb menu becomes smaller.


Can anyone help me with some custom CSS? 

Password: christmas

 

1738250374_Schermafbeelding2020-12-22om13_46_07.thumb.png.4bf5b22628cedfee863d3bc73213626d.png

Link to comment
On 12/22/2020 at 7:55 PM, hermanvulkers said:

Site URL: https://nectarine-turbot-596s.squarespace.com/store-1/p/peperbus-zwolle

Hello everyone,

I'm struggling to remove some whitespace and subsequently move some content upwards (see picture).


For example, I want to align the product thumbnail and product title. I also want to move everything in total upwards so the gap between the header and the breadcrumb menu becomes smaller.


Can anyone help me with some custom CSS? 

Password: christmas

 

1738250374_Schermafbeelding2020-12-22om13_46_07.thumb.png.4bf5b22628cedfee863d3bc73213626d.png

Add this to Design->Custom CSS

.products.collection-content-wrapper {
    padding-top: 0;
    padding-bottom: 0;
}
.ProductItem .ProductItem-additional {
    margin-top: 0;
}
.tweak-product-basic-item-content-alignment-top .ProductItem-details, .tweak-product-basic-item-gallery-design-stacked .ProductItem-details {
    padding-top: 0 !important;
}
@media screen and (max-width: 768px) {
    .ProductItem-details .ProductItem-details-excerpt {
      margin-bottom: 0;
    }  
}

image.thumb.png.fb9dc9dfa498bda0cfc3c406689b3dd6.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Use this if you want to revert logo image.thumb.png.e98eb716bdecc45569cde3c966427772.pngcolor on product

.collection-type-products.view-item .header-title-logo img {
    filter: invert(1);
}

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 3 months later...
On 4/9/2021 at 9:38 PM, JamieC297 said:

Hi Bangank36,

I am also struggling to change the styling in my cart: https://www.punchy.cc/cart you seem a whizz at this stuff.

I'd like the background to be white and the lettering black, any chance you can help me?

I have added various CSS additions but none have worked so far.

Let me know if better to start a new thread, first time on here!

Many thanks

 

Add to Design > Custom CSS

/* Cart page */
body#cart {
    background: white;
}
body#cart #sqs-cart-root * {
    color: black;
}
body#cart header#header * {
    color: black;
}
body#cart .Cart-inner svg {
    fill: black !important;
    stroke: black;
}

 

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
  • 4 months later...

Hello and apologies for resurrecting this topic. I applied to the above code and the padding did get decreased on my product details page, but not enough to be able to see the checkout button without scrolling. I wonder if it's possible to pull up the content a bit further up.

URL: Feathertail.co.uk
password: qwerty

Link to comment
20 hours ago, zhey said:

Hello and apologies for resurrecting this topic. I applied to the above code and the padding did get decreased on my product details page, but not enough to be able to see the checkout button without scrolling. I wonder if it's possible to pull up the content a bit further up.

URL: Feathertail.co.uk
password: qwerty

Can you take a screenshot of padding on your site? 

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

And this is the code:

 

.products.collection-content-wrapper {
    padding-top: 0;
    padding-bottom: 0;
}
.ProductItem .ProductItem-additional {
    margin-top: 0;
}
.tweak-product-basic-item-content-alignment-top .ProductItem-details, .tweak-product-basic-item-gallery-design-stacked .ProductItem-details {
    padding-top: 0 !important;
}
@media screen and (max-width: 768px) {
    .ProductItem-details .ProductItem-details-excerpt {
      margin-bottom: 0;
    }  
}

Link to comment
  • 2 years later...

Hi, is this thread still going?

I am having similar problems as the above and the code that worked for most people is not working for me. I would like to reduce the size of the padding in two areas of my product page (circled in red, see attached picture).

I do have other code going so I'm not sure if something is overriding but I can't seem to get anything to work. 

The url is https://www.thamesworkshop.com/store/p/small-strainer-x78kx-27p7j-mty5p and I'm having the problem in mobile only.

Thanks in advance

Screen Shot 2024-05-29 at 10.15.32 PM.png

Link to comment
On 5/30/2024 at 9:20 AM, NH85 said:

Hi, is this thread still going?

I am having similar problems as the above and the code that worked for most people is not working for me. I would like to reduce the size of the padding in two areas of my product page (circled in red, see attached picture).

I do have other code going so I'm not sure if something is overriding but I can't seem to get anything to work. 

The url is https://www.thamesworkshop.com/store/p/small-strainer-x78kx-27p7j-mty5p and I'm having the problem in mobile only.

Thanks in advance

Screen Shot 2024-05-29 at 10.15.32 PM.png

You can use this code to Custom CSS box

@media screen and (max-width:767px) {
div.ProductItem-details-excerpt-below-add-to-cart ul, div.ProductItem-details-excerpt-below-add-to-cart {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}
.sqs-add-to-cart-button-wrapper {
    margin-bottom: 0px !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

Thank you @tuanphan you are a genius!!! I really appreciate your help.

My last request is to move the price down so it lives just above the Add To Cart button. I have looked at @creedon's older fix from June 2021 with inserting code into Store Settings > Advanced > Page Header Code Injection for the store page, however with his code all of my variants and descriptions get jumbled and put in the wrong place, and the price does not go above the Add To Cart Button. 

I would like to do this on desktop and mobile. You can find my products at www.thamesworkshop.com/store

Thank you

Screen Shot 2024-06-04 at 10.19.03 PM.png

Screen Shot 2024-06-04 at 10.19.13 PM.png

Link to comment

You can use this code to Website > Website Tools > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $('.ProductItem-details .ProductItem-product-price').insertBefore('.ProductItem .sqs-add-to-cart-button-wrapper');
});
</script>

image.thumb.png.2bc3a13b5a27013cf625935b78564527.png

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.