Hello,
I am hoping to adjust the padding between the product image page for the Sense theme. Specifically I want to reduce the spacing between the top header and main product photo, and between the main product photo and the thumbnails below it. See the attached screenshot for reference. Please let me know if anyone has suggestions. Thanks!
Kindly Share your Store Url, So that i can help you.
Welcome to shopify community.
Please share your store URL and if your store is password protected then please provide password too.
Thank you.
Could you provide me store URL? I should be able to answer your question.
Yours faithfully!
Please add below css in bottom of assets/section-main-product.css file
@media screen and (min-width: 750px)
.product–thumbnail_slider .product__media-list {
padding-bottom: 0;
margin-bottom: 10px;
}
Thank you.
@media screen and (max-width: 749px){
.slider.slider--mobile {
padding-top: max(0rem,calc(var(--shadow-vertical-offset) * -1 + var(--shadow-blur-radius))) !important;
padding-bottom: max(0rem,calc(var(--shadow-vertical-offset) + var(--shadow-blur-radius))) !important;
}
}
Add this code in the bottom of the component-slider.css file
Please add the following CSS code to your assets/component-slider.css bottom of the file.
@media screen and (max-width: 749px){
.slider.slider--mobile {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
}
Thanks!
Thank you @dmwwebartisan
How would you modify the code to reduce the padding on the desktop as well? Thanks in advance.
@dmwwebartisan reducing the space between the main product image and the thumbnails below. Thanks!
Please add the following CSS code to your assets/component-slider.css bottom of the file.
@media screen and (min-width: 750px){
.product--thumbnail .product__media-list, .product--thumbnail_slider .product__media-list {
padding-bottom: 0px !important;
}
}
Thanks!
Why This doesn’t work on my theme?! Looks like it is the solution for the theme, but impossible to make it work.