How to adjust desktop chart to fit on mobile?

Store Design
1

Hello,

I made a page using HTML and displayed it perfectly on a desktop; however, when I go on mobile it is way too big to even fit the screen properly. How can I fix this?

Website link: https://nosetotailprovisions.com/products/100-grass-fed-finished-bison-liver-crisps

Password: Megafuana

It is under the product information.

2

Try the following band-aid CSS in custom-css setting

https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css

@media screen and (max-width: 750px) {
 table.tg {
  width: 100%;
  margin-left: inherit; }
}

This can be an advanced customization to make a large prebuilt table responsive, it’s more to do with base html&css problem than shopify themeing.

It’s better if table is made with being responsive in mind from the beginning.

Good Hunting.

1 Like
3

@nosetotail add below css into base.css file

@media (max-width:425px)
{
table.tg {
    width: 100% !important;
    margin-left: 0% !important;
}
}

Ujjaval_0-1683647597408.png
Ujjaval_0-1683647597408.png429×617 19.1 KB

4

This band-aid sounded like exactly what I needed. But when I assed the CSS code to my Refresh theme and viewed the page on mobile, the table was still spanning beyond the width of the phone. Example: https://nerdchicboutique.com/products/intergalactic-meltdown-long-sleeve-concert-hoodie