title: button element looks small on mobile
body: <p>I have a simple input and button. The button looks fine on the actual computer regardless of screen size. The first screenshot is what it looks like from the mobile view in the dev tools. However, when I actually visit the site on my phone I get the second picture. As you can see the button is shorter than it was on the desktop settings. Any ideas on how to address this?</p>
  
  <p><a href="https://i.stack.imgur.com/ltARQ.png" rel="nofollow noreferrer">what it looks like on desktop and should look like on mobile</a></p>
  
  <p><a href="https://i.stack.imgur.com/8DrTt.jpg" rel="nofollow noreferrer">What it actually looks like on mobile</a></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>.input-field {
    width: 370px;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    height: 35px;
    outline: none;
    border: none;
    font-size: 16px;
    @media (max-width: 500px) {
        width: 250px;
    }
  
  }
  .email-input {
    display: flex;
    height: 35px;
    justify-content: center;
    align-items: center;
    margin-top: 60px;
  
  }
  .email-button {
    height: 37px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    background-color: #50AE54;
    color: white;
    font-size: 16px;
    width: 100px;
    border: none;
    outline: none;
    @media (max-width: 600px) {
        width: 75px;
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="email-input"&gt;
       &lt;input type="text" class="input-field" [(ngModel)]="email_address" placeholder="Email me for updates" /&gt;
       &lt;button class="email-button" (click)="subscribe()"&gt;Send&lt;/button&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>