CSS Mobile Definition Not Applying?
<p>I made a site <a href="http://potion.x10host.com/blog/" rel="nofollow noreferrer">here</a>. It works great on all screens except mobile where the slogan is too large. So i added a mobile css definition for the slogan "Always coding and brewing up something good" but on my phone it does nothing? I am using bootstrap but only with the grid and responsive elements. The css I applied is the below in question is:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>@media (max-width: 480px) { 
 .grabber{
  font-size: 12px;
 }

}</code></pre>
</div>
</div>
</p>