Reduce padding/margin on custom section Debut

[Tilde]

Hi,

I'm trying to reduce the padding underneath my product image so the space between the product image and footer is the same as the space between the banner and product image but on mobile only.

Have tried this code but it doesn't seem to change anything. Have also tried to swap margin for padding but no joy.

@_media only screen and (max-width: 749px) {
.shopify-section-16111766910bc0d32c {
margin-bottom: 0px;
}

Any advice?

Site is theofficialmusicboxcompany.com

pw is TOMBC

[suyash1 · Accepted solution]

@Tilde - add this css to the very end of theme.css and check , adjust number 15 as per need

#shopify-section-16111766910bc0d32c .custom__item{margin-bottom: 15px;}

[Ninthony]

You should change the margin for your footer, I believe that's the culprit:

footer.site-footer {
    margin-top:20px
}

[Tilde]

Just had to add the media only line but that works- thanks!

[suyash1]

@Tilde - great, sorry i had missed it.

[Tilde]

No problem at all- just very grateful for the help!

I was wondering if you could help with a couple of things on my product page?

I would like to reduce the product image size slightly for mobile only and would also like to reduce the empty space between the product thumbnails and the product title (also mobile only).

Plus also the padding at the bottom of the page (after social sharing buttons) could do with less padding. Thank you so much!

[suyash1]

@Tilde - Add following css to the end of your theme.css file

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

.product-single__media img{width: 90%;  right: 0;} //to make image smaller

.product-single__media-group { margin-bottom: 10px;} //reduce space between image and thumbnail

.site-footer { margin-top: 25px;} //reduce gap after social icons

}

[Tilde]

Thank you, that's great! Making the product image smaller has created more space between the product image and the thumbnails though. Is there code to reduce that?