I have made a table to showcase a product comparison. I uploaded it on my product page via a custom liquid on a custom template. It looks fine on my desktop, but when I look on mobile, it’s massive and ruins the whole layout. How do I change the code so it looks nice on mobile as well? I am not a coder. I understand very little about it. I made this table using tablesgenerator.com, so please be patient with me 
Here is the custom liquid:
.tg {border:none;border-collapse:collapse;border-color:#ccc;border-spacing:0; display: inline-block;} .tg td{background-color:#fff;border-color:#ccc;border-style:solid;border-width:0px;color:#333; font-family:Arial, sans-serif;font-size:14px;overflow:hidden;padding:5px 20px;word-break:normal;} .tg th{background-color:#f0f0f0;border-color:#ccc;border-style:solid;border-width:0px;color:#333; font-family:Arial, sans-serif;font-size:14px;font-weight:normal;overflow:hidden;padding:5px 20px;word-break:normal;} .tg .tg-kjnl{background-color:#f9f9f9;border-color:inherit;font-family:serif !important;text-align:left;vertical-align:top} .tg .tg-if4e{background-color:#f9f9f9;border-color:inherit;font-weight:bold;text-align:left;vertical-align:top} .tg .tg-fymr{border-color:inherit;font-weight:bold;text-align:left;vertical-align:top} .tg .tg-7btt{border-color:inherit;font-weight:bold;text-align:center;vertical-align:top} .tg .tg-j30t{background-color:#f9f9f9;border-color:inherit;font-family:serif !important;text-align:center;vertical-align:top} .tg .tg-abip{background-color:#f9f9f9;border-color:inherit;text-align:center;vertical-align:top}| Model: | Medical 3™ | Medical 4™ | Medical 5™ | Medical 6™ | Medical 7Plus™ |
|---|---|---|---|---|---|
| Capactiy | 2 People | 2 People | 3 People | 4 People | 4-6-People |
| Heaters | ✓ | ✓ | ✓ | ✓ | ✓ |
| Hot/Cold Cleansing System™ | ✓ | ✓ | ✓ | ✓ | ✓ |
| Detox Routine™ | ✓ | ✓ | ✓ | ✓ | ✓ |
| Insulated Airflow System™ | ✓ | ✓ | ✓ | ✓ | ✓ |
| 3D Heat Therapy™ | ✓ | ✓ | ✓ | ✓ | ✓ |
| Safe Cool Down System™ | ✓ | ✓ | ✓ | ✓ | ✓ |
| Skin Rejuvenation/Cleansing System™ | ✓ | ✓ | ✓ | ✓ | ✓ |
| Natural Hemlock Wooden Construction | ✓ | ✓ | ✓ | ✓ | ✓ |
| Simple Touch LED Control Panel™ | ✓ | ✓ | ✓ | ✓ | ✓ |
| Clasp-together Assembly | ✓ | ✓ | ✓ | ✓ | ✓ |
| Roof Vent | ✓ | ✓ | ✓ | ✓ | ✓ |
| Tempered Glass Door | ✓ | ✓ | ✓ | ✓ | ✓ |
| Speaker System with MP3 Connection | ✓ | ✓ | ✓ | ✓ | ✓ |
| Rapid Internal Heating System™ | ✓ | ✓ | ✓ | ✓ | |
| Energy Efficient Heating System™ | ✓ | ✓ | ✓ | ✓ | |
| Full Spectrum Heaters™ | ✓ | ✓ | ✓ | ✓ | |
| Bluetooth Functionality | ✓ | ✓ | ✓ | ✓ | |
| Mood Lighting™ | ✓ | ✓ | ✓ | ✓ | |
| 3D Surround Heat with 2 Front Heaters | ✓ | ✓ | ✓ | ||
| Chromatic Therapy System™ | ✓ | ✓ | ✓ | ||
| Deep Bench Seating for Extra Comfort | ✓ | ✓ | ✓ | ||
| Interior Reading Light System™ | ✓ | ✓ | ✓ | ||
| Silent Heating System™ | ✓ | ✓ | ✓ | ||
| Long enough to lay down | ✓ | ✓ | |||
| Color Light Therapy to naturally improve your skin |
✓ | ✓ | |||
| Ultru Full Spectrum Heaters™ that heat up 2X Faster |
✓ | ✓ | |||
| Extra-Energy Efficient: 15% Thicker Glass & Wooden Panels |
✓ | ✓ | |||
| Built-in Backrest for ease of use | ✓ | ✓ | |||
| Audio Theater System™ | ✓ | ||||
| Omni-Directional Heating™ | ✓ | ||||
| Executive Corner Unit Design | ✓ | ||||
| Extra-Insulated Airflow System™ | ✓ | ||||
| Extra-Rapid Internal Heating System™ | ✓ | ||||
| Interior Dimensions (WDH) |
(WDH): 36" X 32" X 66.5" | (WDH): 44" X 38" X 69" | (WDH): 57" X 37" X 69" | (WDH): 67" X 44" X 69" | (WDH): 62" X 62" X 69" |
| Exterior Dimensions (WDH) |
(WDH): 39" X 36" X 73" | (WDH): 48" X 42" X 75" | (WDH): 63" X 42" X 75" | (WDH): 71" X 48" X 77" | (WDH): 66" X 66" X 77" |
| Operating Voltage | 120V/15amp | 120V/15amp | 120V/30amp | 120V/30amp | 120V/30amp |
| Watts | 1500W | 1700W | 2600W | 3100W | 3400W |
| Plug Type | NEMA 5-15 | NEMA 5-15 | 2xNEMA 5-15 | 2xNEMA 5-15 | 2xNEMA 5-15 |
| Weight | 295 lbs. | 385 lbs. | 455 lbs. | 550 lbs. | 625lbs. |