How to remove spacing between product title and product images? (happens only on mobile)

Solved
Highlighted
New Member
8 0 0

I need help on my store I'm having a really weird spacing on my product page between the product title and the product images. There are no margins to edit and I am extremely confused where the code is even causing the space. It is extremely odd that it can only happens when it's on mobile.

Screenshot (16).pngScreenshot (17).png

0 Likes
Highlighted
Shopify Partner
2395 517 667

Hey @zephwong,

Please provide a website URL. I will check and provide a solution here.

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
New Member
8 0 0

Here you go!

https://www.hanawebstore.com/products/dinosaur-hoodie

 

Im also running into another issue. For some reason my “add to cart” button is glitching in my mobile but when I preview it using my computer it works fine.

BA0E8DF2-25F1-49D2-A124-F7289EE7FDB3.png

image.jpg

 

0 Likes
Highlighted
Shopify Partner
2395 517 667

Hey @zephwong,

Do you need to solve only add to cart button problem?

Let me know which device you're checking because this is not the case for me.

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
New Member
8 0 0

Nope I am trying to solve the spacing problem first and foremost. I think we can just put the add to cart button problem on hold for now. The spacing problem happens on all tablet and mobile devices. Link: https://www.hanawebstore.com/collections/frontpage/products/dinosaur-hoodieScreenshot (16).pngScreenshot (17).png

0 Likes
Highlighted
Astronaut
1088 180 214

This is an accepted solution.

@zephwong 

Do this to fix it in 20 seconds:

1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid and paste this at the bottom of the file:

 

@media (max-width: 767px){
    .slick-list{
        max-height: 180px;
    }
}

 



Please let me know whether it works.

Kind regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
1 Like
Highlighted
New Member
8 0 0

Sir you’re amazing thank you! I’m still running into another issue on mobile though. The “add to cart” button keeps getting cut off. It does not happen on my mobile preview on my desktop but when I use my iPhone to access the website it suddenly happens.

 

584F73C4-196E-43F8-9B42-17B40C42A52B.png

0 Likes