How can I make my product tables mobile responsive?

[wwddistrict]

Hello!

I have created tables for my product description. They look fine on desktop but they are not responsive on mobile.

How can I solve it? Thanks! 

   

[Moeed]

Hey @wwddistrict 

Could you please provide your Store URL and, if applicable, the Password too? Your cooperation is greatly appreciated!

Best Regards,
Moeed

[wwddistrict]

here you go!

https://watchdistrict.store/products/gmt-master-ii-16711

oleest

[Moeed]

Hey @wwddistrict 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (max-width: 767px) {
.product__description.rte.quick-add-hidden table {
    font-size: 12px !important;
}
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[wwddistrict]

Hi @Moeed !

I have followed the steps. However, the issue remains. 

[Moeed]

Hey @wwddistrict 

Try reducing the font size value from 12 to maybe 10 or 8 whichever looks good for you then it should be good!

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[PageFly-Richard]

Hi @wwddistrict 

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:
The problem could be that your theme does not support responsive table well, so you can contact the theme you are using to get the necessary support. In addition, you can also reduce the font size to help you improve the appearance of this page more consistently

Hope you find my answer helpful!
Best regards,
Richard | PageFly