Reduce padding/margin on custom section Debut

Solved
Tilde
Excursionist
20 0 9

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

 

Screen Shot 2021-01-21 at 14.56.09.png

0 Likes
suyash1
Shopify Partner
1952 195 295

This is an 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;}

 

you are welcome to contact me.
My email - suyash.patankar@gmail.com

#1 page builder app on Shopify - for FREE! PageFly
Ninthony
Shopify Partner
1634 224 612

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

footer.site-footer {
    margin-top:20px
}
If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Tilde
Excursionist
20 0 9

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

suyash1
Shopify Partner
1952 195 295

@Tilde - great, sorry i had missed it.

you are welcome to contact me.
My email - suyash.patankar@gmail.com

#1 page builder app on Shopify - for FREE! PageFly
Tilde
Excursionist
20 0 9

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!

 

IMG_4081.jpeg

0 Likes
suyash1
Shopify Partner
1952 195 295

@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
}
you are welcome to contact me.
My email - suyash.patankar@gmail.com

#1 page builder app on Shopify - for FREE! PageFly
Tilde
Excursionist
20 0 9

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? 

0 Likes