Hiding text on small viewports using span class and media queries
<p>I have tried to use media queries and <code>display: none</code> in my css to hide part of my nav bar text when the screen size is less than 600px.</p>

<p>Why does it not work - the original link text remains at any screen width:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>@media all and (min-width: 0.1px) and (max-width: 599.9px) {
  #mobhide {
    display: none !important;
  }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a href="/about.html"&gt;ABOUT&lt;span class="mobhide"&gt; US&lt;/span&gt;&lt;/a&gt;
&lt;span style="width:1vw;display:inline-block"&gt;|&lt;/span&gt;
&lt;a href="/cookies.html"&gt;COOKIES&lt;span class="mobhide"&gt; &amp; PRIVACY&lt;/span&gt;&lt;/a&gt;
&lt;span style="width:1vw;display:inline-block"&gt;|&lt;/span&gt;
&lt;a href="/terms.html"&gt;TERMS&lt;span class="mobhide"&gt; &amp; CONDITIONS&lt;/span&gt;&lt;/a&gt;</code></pre>
</div>
</div>
</p>