Product Pages not responsive on mobile for Debut Theme

[AdsUAE]

I am facing issues particularly with product pages where the website is not responsive on mobile. The image and variants have huge space in between them, the whole product page does not fit on one mobile screen, it needs to be scrolled up and down to see the details.

Need the product image, variants and price to feature on one screen on mobile. I have looked at similar issues in the forum and added the meta code of viewport but it is still not resolved. Can shopify team please help me. 

Attached the screenshot from mobile. URL : https://eco-soul-tribe.myshopify.com/

 

[KetanKumar · Accepted solution]

@AdsUAE 

Thanks for post.

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

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

[AdsUAE]

Thank you. It worked. 

[KetanKumar]

@AdsUAE 

Thanks for udpate.

[ttan]

Hi @KetanKumar ,

Would you be able to advise why are some of the product titles sitting  on product image when viewed on mobile? I did not make any changes to this page, not sure why it became like  this suddenly.

[KetanKumar]

@ttan 

Thanks for post

can you please share your store url 

[ttan]

Hi @KetanKumar , 

Website is ebike.sg.

Thanks a lot,

Tricia

[KetanKumar]

@ttan 

Thanks 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.grid-view-item__image-wrapper .grid-view-item__image 
{
height: 100%;
    object-fit: contain;
}

[ttan]

Thanks @KetanKumar , it works!! do you know how to remove the scroll bar? I don't see it before but not sure why it's there now.

 

[KetanKumar]

@ttan 

Thanks for update 

yes, please add this code

.grid--view-items {overflow: visible;}