How can I make my website table fully visible on mobile devices?

[Hendrik99]

Hey,

I have a table on a page. I designed it with tablesgenerator. It looks fine on Desktop:

Here is how it looks on Desktop View:

Problem: On mobile you can only see three of the 4 colums and you have to swipe to see the rest. I want the table to resize so that you can see the 4 colums on mobile without having to swipe. I dont know if responsive is the right description for it.

Here is how it looks on mobile right now:

I put the following code in the theme.liquid before : But i dont know if the code doesnt work or if the code just isn´t right.

the link to the shop is: https://lgoony-shop.myshopify.com/

the pw: merkelmachshopauf

Thanks so much in advance for any help:)

[made4Uo]

Hi @Hendrik99

To adjust the width of your table and not getting cut off on mobile, please follow the instructions below

1. From you admin store, go to Online store > Themes > Click the three dots > Edit code
2. This should open the code editor. Find the Asset folder and open the base.css file
3. Paste the code below at the very end of the file

@media only screen and (max-width: 481px) {
table.tg td {
    padding: 3px 5px;
}
}

[Hendrik99]

Hey Made4Uo,

Thank you for your fast reply. I tried your propositon and it changed something. It got better. but it did not work completly. I tried to mess with the width and padding parameters, but i didnt get better results.

Here is a screenshot of how it looks now.