How can I eliminate the large gap on my mobile product page?

Shopify Discussion
1

Hello everyone. Anyone got a solution to remove the huge gap from the product page picture, down to the text + add to cart?? Only on mobile

https://brushbuddy.dk/products/brush-buddy-elektrisk-tandboerste-sort

2E266634-C17F-4277-B6F1-F6385A97D878.png
2E266634-C17F-4277-B6F1-F6385A97D878.png1125Ɨ2436 103 KB

1 Like
2

Hello There,

Admin go to online store ā†’ themes ā†’ actions ā†’ edit code
Find Asset >timber.scss.css and paste this at the bottom of the file:

@media only screen and (max-width: 600px) {
.product-single__meta {
    padding-top: 0;
}
.product-single__add-to-cart {
    align-items: center;
    justify-content: center;
    margin-bottom: -25px;
}
button#AddToCart--product-template {
    margin-top: -27px;
}
}

ZestardTech_0-1677143496435.png
ZestardTech_0-1677143496435.png573Ɨ563 22.5 KB

3

Hi,
I hope you are doing good.

Kindly follow the steps below:

  1. Go to your Online store > Themes > Edit code
  2. Open your theme.liquid file
  3. Paste the below code before

I hope the above is useful to you.
Thanks!

4

Hi @MadsL1 ,

This is Kate from PageFly - Landing page builder, Iā€™d like to suggest this idea:

Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/timber.scss.css->paste below code at the bottom of the file

@media only screen and (max-width: 590px) {
.slick-list.draggable {
    height: 500px;
}
.product-single__meta {
    padding-top: 0;
}
.product-single__add-to-cart {
    align-items: center;
    justify-content: center;
    
}
button#AddToCart--product-template {
    margin-top: -25px;
}
}

Hope my answer will help you.

Kate from PageFly Team

5

This did help a little. But there is still a big gap :disappointed_face:

D351462A-C2C4-415F-A665-2444BEBA716B.png
D351462A-C2C4-415F-A665-2444BEBA716B.png1125Ɨ2436 105 KB

6

FACFE659-7AA1-44A1-BF7C-68FAFA361C8C.png
FACFE659-7AA1-44A1-BF7C-68FAFA361C8C.png1125Ɨ2436 105 KB

This did help a little, but not the entire gap is gone :disappointed_face:

1 Like
7

Use this code I hope it help

@media(max-width:767px){
.product-single__photos {
    margin-top: -22px !important;
    padding-bottom: 0px !important;
    margin-bottom: -20px !important;
}
.grid__item.product-single__meta--wrapper.medium--five-twelfths.large--five-twelfths {
    margin-top: -15px !important;
   }
}
ul.slick-dots {
    margin-bottom: 42px !important;
}
8

I see your problem has been solved. Iā€™d be happy if you want any help

Best regards,

Kate