Product Pages not responsive on mobile for Debut Theme

Solved
Highlighted
Tourist
7 0 2

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/

 WhatsApp Image 2020-06-17 at 10.59.51.jpeg

Highlighted
Shopify Partner
9413 1186 3297

This is an 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;
}
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Highlighted
Tourist
7 0 2

Thank you. It worked. 

Highlighted
Shopify Partner
9413 1186 3297

@AdsUAE 

Thanks for udpate.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Excursionist
18 0 4

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.

IMG-0916.PNG

Highlighted
Shopify Partner
9413 1186 3297

@ttan 

Thanks for post

can you please share your store url 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Highlighted
Excursionist
18 0 4

Hi @KetanKumar , 

Website is ebike.sg.

Thanks a lot,

Tricia

0 Likes
Highlighted
Shopify Partner
9413 1186 3297

@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;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Highlighted
Excursionist
18 0 4

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.

Screen Shot 2020-10-20 at 11.48.57 PM.png 

Highlighted
Shopify Partner
9413 1186 3297

@ttan 

Thanks for update 

yes, please add this code

.grid--view-items {overflow: visible;}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing