The tables in the product descriptions aren’t adapting in mobile view…overflowing. Is there an easy fix or setting for this? Canopy theme. https://artisanbrandingcompany.com/products/copy-of-16-oz-pint-mixing-glass
Hi @infoABC
I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.
Please add this css in your bottom of the styles.css file:
@media screen and (max-width: 767px) {
.product-container .details-table {width: 100% !important;}
}
Regards,
San
Thank you for the prompt reply and guidance. I added the code but it didn’t appear to make a difference.
320px is the smallest screen for a mobile device you really have to worry about and it appears fine to me when inspecting on chrome:
Valid point. I checked it on Chrome via my mobile device and it looks good. The issue is only on Bing on my Galaxy S22. Any idea what’s causing the issue or how to fix?
@INA_MSWEB Update to previous reply…The code you provided did work when viewing in Chrome (as pointed out by @Ninthony ) but didn’t work in Bing. Any thoughts? Thanks
Hi @infoABC sorry for late reply.
Can you let me know where you can place the code?
I placed the code at the bottom of assets/styles.css.liquid.
I found a table that was formatted correctly when viewing EDGE mobile and pulled the code to compare the bad and good. See attached csv. Can anyone identify what might be causing the issue? As mentioned in previous replies the code provided by @INA_MSWEB worked fine in Chrome, as pointed out by @Ninthony , but I’m still struggling via EDGE.