title: text wrap inside a button
body: <p>I have 4 <code>a</code>-tags. Everything in each of the CSS works. It resizes the buttons perfectly on my phone. The only problem I have is on my phone, for the login/register button, the text cuts of inside the button and all it shows is login/register.  </p>
  
  <p>From what I recall <code>white-space: normal</code> is the way to do this, but maybe I am wrong.</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-css lang-css prettyprint-override"><code>@media only screen and (max-device-width: 480px) {
    .newsButton {
      width: 49%;
      height: 140px;
      white-space: normal;
      float: left;
    }
    
    .venueButton {
      width: 49%;
      height: 140px;
      white-space: normal;
      float: right;
    }
    
    .learnButton {
      width: 49%;
      height: 140px;
      white-space: normal;
      float: left;
    }
    
    .loginButton {
      width: 49%;
      height: 140px;
      white-space: normal;
      float: right;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a href="menu.php" class="newsButton" data-role="button" data-theme="e"&gt;News&lt;/a&gt;
  &lt;a href="venue.php" class="venueButton" data-role="button" data-theme="e"&gt;Venue Hire&lt;/a&gt;
  &lt;a href="learn.php" class="learnButton" data-role="button" data-theme="e"&gt;Learn&lt;/a&gt;
  &lt;a href="login.php" class="loginButton" data-role="button" data-theme="e"&gt;Login/Register&lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>