Responsive chart in product description

  • Resolved siejek

    (@siejek)


    3 years ago

    Greetings,

    I have created this size chart that i am displaying on my product page.
    Any clues how to make it responsive so that its full size is shown correctly on mobile devices and tablets?

    `<style type=”text/css”>
    .tg {border-collapse:collapse;border-spacing:0;}
    .tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
    overflow:hidden;padding:10px 5px;word-break:normal;}
    .tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
    font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
    .tg .tg-4ei5{background-color:#FBFBFB;color:#141618;text-align:left;vertical-align:top}
    .tg .tg-5jfn{background-color:#FFF;color:#141618;text-align:left;vertical-align:top}
    .tg .tg-k7cc{background-color:#FFF;color:#141618;font-weight:bold;text-align:left;vertical-align:top}
    </style>
    <table class=”tg”>
    <thead>
    <tr>
    <th class=”tg-k7cc”>SIZE (CM)</th>
    <th class=”tg-k7cc”>XS</th>
    <th class=”tg-k7cc”>S</th>
    <th class=”tg-k7cc”>M</th>
    <th class=”tg-k7cc”>L</th>
    <th class=”tg-k7cc”>XL</th>
    <th class=”tg-k7cc”>XXL</th>
    <th class=”tg-k7cc”>XXXL</th>
    <th class=”tg-k7cc”>XXXXL</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td class=”tg-5jfn”>Lenght + belt<br>short / regular / long / x-long</td>
    <td class=”tg-5jfn”>101 / 106 / 111 / 116</td>
    <td class=”tg-5jfn”>101,5 / 107 / 112 / 117</td>
    <td class=”tg-5jfn”>102 / 107 / 112 / 117</td>
    <td class=”tg-5jfn”>102,5 / 107,5 / 112,5 / 117,5</td>
    <td class=”tg-5jfn”>103 / 108 / 113 / 118</td>
    <td class=”tg-5jfn”>103,5 / 109 / 114 / 118,5</td>
    <td class=”tg-5jfn”>104 / 109 / 114 / 119</td>
    <td class=”tg-5jfn”>104,5 / 110 / 115 / 119,5</td>
    </tr>
    <tr>
    <td class=”tg-4ei5″>Insteam<br>short / regular / long / x-long</td>
    <td class=”tg-4ei5″>76,2 / 81,2 / 86,2 / 91,2</td>
    <td class=”tg-4ei5″>76,2 / 81,2 / 86,2 / 91,2</td>
    <td class=”tg-4ei5″>76,2 / 81,2 / 86,2 / 91,2</td>
    <td class=”tg-4ei5″>76,2 / 81,2 / 86,2 / 91,2</td>
    <td class=”tg-4ei5″>76,2 / 81,2 / 86,2 / 91,2</td>
    <td class=”tg-4ei5″>76,2 / 81,2 / 86,2 / 91,2</td>
    <td class=”tg-4ei5″>76,2 / 81,2 / 86,2 / 91,2</td>
    <td class=”tg-4ei5″>76,2 / 81,2 / 86,2 / 91,2</td>
    </tr>
    <tr>
    <td class=”tg-5jfn”>1/2 Waist</td>
    <td class=”tg-5jfn”>38</td>
    <td class=”tg-5jfn”>41</td>
    <td class=”tg-5jfn”>44</td>
    <td class=”tg-5jfn”>47</td>
    <td class=”tg-5jfn”>50</td>
    <td class=”tg-5jfn”>53</td>
    <td class=”tg-5jfn”>56</td>
    <td class=”tg-5jfn”>59</td>
    </tr>
    <tr>
    <td class=”tg-4ei5″>1/2 Hip</td>
    <td class=”tg-4ei5″>46</td>
    <td class=”tg-4ei5″>49</td>
    <td class=”tg-4ei5″>52</td>
    <td class=”tg-4ei5″>55</td>
    <td class=”tg-4ei5″>58</td>
    <td class=”tg-4ei5″>61</td>
    <td class=”tg-4ei5″>64</td>
    <td class=”tg-4ei5″>67</td>
    </tr>
    <tr>
    <td class=”tg-5jfn”>1/2 leg circumference at the bottom</td>
    <td class=”tg-5jfn”>18,8</td>
    <td class=”tg-5jfn”>19,3</td>
    <td class=”tg-5jfn”>19,8</td>
    <td class=”tg-5jfn”>20,3</td>
    <td class=”tg-5jfn”>20,8</td>
    <td class=”tg-5jfn”>21,3</td>
    <td class=”tg-5jfn”>21,8</td>
    <td class=”tg-5jfn”>22,3</td>
    </tr>
    </tbody>
    </table>`

    Best regards!

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Stef

    (@serafinnyc)

    Just Google Responsive Table CSS. It’s fairly easy to do.

    https://codepen.io/andornagy/pen/EVXpbR

    Thread Starter siejek

    (@siejek)

    Alright, any hint how do i implement it into general description as before? Because now it is divided into HTML and CSS separately.

    Stef

    (@serafinnyc)

    You need to take away your original style that you added above your table and ensure you are following the CodePen method. I’d use a custom.css file in your child theme or your child theme’s styles.css file.

    Don’t mark up your table like you have it now.

    Another good practice is to add a unique selector to the table such as

    
<table class="my-new-table">

    So that you don’t affect any other tables on the website.

    Thread Starter siejek

    (@siejek)

    Thank you for all the help.

    I have created child theme to my Storefront, edited style.css file but i think my CSS skills are to weak to handle it because it’s still not working.
    Seems like style.css file is not affecting anything or i got something totally wrong.

    Mirko P.

    (@rainfallnixfig)

    Hey @siejek,

    This would require some CSS skills and if you’re interested in learning CSS we highly recommend using the free tutorials at w3schools.

    Here, you can find the basics of selectors (how to target the right element on the page), and properties (how to change the element on the page).

    Ultimately, if you want to be supported by a customization expert to complete these tasks, please consider looking at Codeable where you’re able to hire from a curated list of experts.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Responsive chart in product description’ is closed to new replies.