title: Responsive text size using w3.css
body: <p>I'm trying to make my website more responsive using w3.css (I know it's not everyone's favourite, but it seems simpler than trying to make my own CSS work for every browser and device).</p>
  
  <p>Is there an elegant way to make text smaller on small screens using w3.css please? I have a header using a single table row, 5 columns, all h3 size. On a small screen I'd like this to be h4 or h5 so it all fits.</p>
  
  <p>I don't want to use vw or it would be too big on large screens.
  I could duplicate the content and use w3-hide-small for one and hide the other version on medium and large screens but that doesn't seem like good practice. Alternatively, should I use media queries or is there a way in w3.css? </p>
  
  <pre><code>&lt;table class="w3-container w3-table"&gt;
   &lt;tr&gt;
    &lt;td&gt;
    &lt;h2 id="date1"&gt;&lt;b&gt;title1&lt;/b&gt;&lt;/h3&gt;
    &lt;/td&gt;
    &lt;td class="w3-black w3-center"&gt;
    &lt;h3&gt;title2&lt;/h3&gt;
    &lt;/td&gt;
    &lt;td class="w3-center"&gt;
    &lt;h3&gt;title3&lt;/h3&gt;
    &lt;/td&gt;
    &lt;td class="w3-center"&gt;
    &lt;h3&gt;title4&lt;/h3&gt;
    &lt;/td&gt;
    &lt;td class="w3-center"&gt;
    &lt;h3&gt;title5&lt;/h3&gt;
    &lt;/td&gt;
   &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>