Removing white space / moving content up on product detail page

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

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

 

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

Use this if you want to revert logo color on product

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

Thanks so much!

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

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

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

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? 

Thanks for responding.

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

On 8/18/2021 at 7:26 PM, zhey said:

Thanks for responding.

Can you share link to product in screenshot? I can't find it or any products on your site

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

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

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

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

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>