Hi there! I have made this nice table for my website but I’m having a hard time getting it to work on mobile (I’ll link the code down below).
Would anyone know how to modify it so it stays as it is on my desktop site but is less wide on mobile? Also is it okay if it slides a tiny bit, I think I even prefer that, if that can be part of the solution.
Thanks and let me know!
.tg {border-collapse:collapse;border-color:#9ABAD9;border-spacing:0;} .tg td{background-color:#EBF5FF;border-color:#9ABAD9;border-style:solid;border-width:1px;color:#444; font-family:Arial, sans-serif;font-size:14px;overflow:hidden;padding:10px 5px;word-break:normal;} .tg th{background-color:#409cff;border-color:#9ABAD9;border-style:solid;border-width:1px;color:#fff; font-family:Arial, sans-serif;font-size:14px;font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;} .tg .tg-oe15{background-color:#ffffff;border-color:#ffffff;text-align:left;vertical-align:top} .tg .tg-m9xe{background-color:#ffffff;border-color:#efefef;font-family:Verdana, Geneva, sans-serif !important;font-size:20px; text-align:center;vertical-align:middle} .tg .tg-kaak{background-color:#ffffff;border-color:#ffffff;text-align:left;vertical-align:top} .tg .tg-y1i5{background-color:#FFF;border-color:#efefef;font-family:Verdana, Geneva, sans-serif !important;font-size:20px; text-align:center;vertical-align:top} .tg .tg-evzh{background-color:#7453f3;border-color:#efefef;text-align:center;vertical-align:middle} .tg .tg-8fmj{background-color:#ffffff;border-color:#efefef;font-family:Verdana, Geneva, sans-serif !important;font-size:20px; text-align:center;vertical-align:middle} .tg .tg-a6xa{background-color:#7453f3;border-color:#efefef;font-family:"Arial Black", Gadget, sans-serif !important;font-size:20px; text-align:center;vertical-align:middle} .tg .tg-0za7{background-color:#7453f3;border-color:#efefef;font-family:"Arial Black", Gadget, sans-serif !important;font-size:20px; text-align:center;vertical-align:middle} .tg .tg-eywo{background-color:#FFF;border-color:#ffffff;font-family:"Arial Black", Gadget, sans-serif !important;font-size:20px; text-align:center;vertical-align:top} .tg .tg-ah3a{background-color:#ffffff;border-color:#efefef;text-align:left;vertical-align:top} .tg .tg-f2ui{background-color:#7453F3;border-color:#ffffff;text-align:center;vertical-align:middle} .tg .tg-fgl9{background-color:#7453F3;border-color:inherit;color:#FFF;font-family:"Arial Black", Gadget, sans-serif !important; font-size:20px;text-align:center;vertical-align:middle} .tg .tg-6dcp{background-color:#ffffff;border-color:#efefef;text-align:left;vertical-align:top} .tg .tg-wk8r{background-color:#ffffff;border-color:#ffffff;text-align:center;vertical-align:top} .tg .tg-ov7p{background-color:#FFF;border-color:#ffffff;font-family:"Arial Black", Gadget, sans-serif !important;font-size:20px; text-align:center;vertical-align:top} .tg .tg-krgj{background-color:#ffffff;border-color:#efefef;color:#002b36;text-align:left;vertical-align:top} .tg .tg-8pzl{background-color:#ffffff;border-color:#efefef;color:#002b36;text-align:center;vertical-align:top} .tg .tg-7uxh{background-color:#ffffff;border-color:#efefef;color:#002b36;font-family:Verdana, Geneva, sans-serif !important; font-size:20px;text-align:center;vertical-align:middle} .tg .tg-7h2o{background-color:#FFF;border-color:#efefef;font-family:Verdana, Geneva, sans-serif !important;font-size:20px; font-weight:bold;text-align:center;vertical-align:middle} .tg .tg-k11r{background-color:#ffffff;border-color:#efefef;font-family:Verdana, Geneva, sans-serif !important;font-size:20px; font-weight:bold;text-align:center;vertical-align:middle} .tg .tg-lnj4{background-color:#7453f3;border-color:#efefef;text-align:center;vertical-align:middle} .tg .tg-ywh4{background-color:#ffffff;border-color:#efefef;font-family:Verdana, Geneva, sans-serif !important;font-size:20px; font-weight:bold;text-align:center;vertical-align:middle} .tg .tg-hwo3{background-color:#ffffff;border-color:#ffffff;font-family:Arial, Helvetica, sans-serif !important;font-size:16px; text-align:center;vertical-align:top} .tg .tg-lygq{background-color:#ffffff;border-color:#ffffff;font-family:"Arial Black", Gadget, sans-serif !important;font-size:16px; text-align:center;vertical-align:top} .tg .tg-1pus{background-color:#ffffff;border-color:#ffffff;font-family:"Arial Black", Gadget, sans-serif !important;font-size:20px; text-align:center;vertical-align:top}Traditional Custom Orthotics |
||
|---|---|---|
| Perdorthist uses 3D scans to make your custom orthotics | ||
| Hypersoles Coverage Guarantee | ||
| Free orthotic re-make | ||
| Cost | $220 | (Average) |
| $500 | ||
| Mandatory in-office visits | No | |
| Yes | ||
| Delivers Directly to Your Doorstep | ||
Ways to Get Started |
Take 3D Scans at home with an iPhone or iPad Pro | |
| Wait for an Appointment | ||