Need Help Removing Excess White Space On Product Page For Debut Theme

Store Design
1

Hi, I’m still having trouble figuring out how to decrease the amount of space between each block on my product picture when using mobile . I’d at least like the spacing to be smaller and even.

ddcollective_0-1647418318981.png
ddcollective_0-1647418318981.png605×746 40.4 KB

here is our website. https://weareauri.com/

2

@ddcollective - please add this css to the very end of our theme.scss file and check, should look like screenshot below

@media only screen and (max-width: 749px){
.product-single__media {height: auto;}
.slick-slide {height: auto;}
}

suyash1_0-1647418727976.png
suyash1_0-1647418727976.png1366×768 228 KB

3

Please add below css in bottom of assets/theme.scss.css file

@media only screen and (max-width:767px) {

.product-single__media {

height: auto;

}

}
Thank you.

4

Hi @ddcollective ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss->paste below code at the bottom of the file:
@media (max-width: 749px) {
    .product-single__thumbnails-item.slick-slide {
        height: auto !important;
    }
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.