Table view in mobile screen unresponsive - dawn theme

[DSS5]

hi, i am trying to use table in product description, which i working good on desktop view but in mobile view it is wide. after searching a bit i got this code(below) - which is woking good in table sizing but also reducing font size. i am including images of both - (1)when i don’t use code its wider and, (2) when i use code its font get smaller. ANY SOLUTION ON THIS???

https://admin.shopify.com/store/0a9274/themes/157050962213/editor?previewPath=%2Fproducts%2Fmeteor-full-grain-leather

#########

@media screen and (max-width: 749px) {
table {
table-layout: inherit !important;
width: 100%;
font-size: 10px !important;
}
.product__description.rte li {
width: 100%;
font-size: 12px !important;
}
}

##########

[Made4uo-Ribe]

Hi @DSS5

Please share your website and not your admin link. If the theme is published, click Preview and copy the link in your browser. Thank you

[DSS5]

https://deshoeshop.com

thanks

[Made4uo-Ribe]

Hi, can you share again the preview? I think the table your talking about is not yet publish. Just the preview not the admin URL. Thanks!

[DSS5]

its published but for try only its for in one product so far. you can check by - click on ‘SHOP IGNATIUS’ and you get there. thanks

[Made4uo-Ribe]

Thank you for the information. Try this one.

• From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
• Find the theme that you want to edit and click on “Actions” and then “Edit code”.
• In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.product__description.rte.quick-add-hidden tbody {
    font-size: clamp(10px, 2vw, 12px);
}

• And Save.
• I hope it help.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

[DSS5]

sorry mate, not working. after using code above - font size still small or same but table got wider. see screenshot. all i need, table get adjust with mobile view same as in desktop view. thanks

[Made4uo-Ribe]

Try this one.

Same Instruction. You can remove the code that i give, Thanks!

@media only screen and (max-width: 749px){
.product__description.rte.quick-add-hidden table {
    width: 400px;
}
.product__description.rte.quick-add-hidden td {
    font-size: 12px;
}
}

Result:

And save.

You can check the image if that is what you want to do.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

[DSS5]

sorry mate, not working in my case. also the screen shot you sent has problem too, like table is reduced but description is wide to not perfectly fit.

All i am after is my table response to mobile views, without loosing font size etc etc. thanks

[DSS5]

say for an example. see the screenshot. now, all i want this table response to mobile view. as you see table below is quite wider in mobile view(when i don’t use code from my very first post).

[Briannastore2]

Your website should be shared not your admin link