title: How to make this HTML form scalable?
body: <p>I have a login page. It doesn't have much text, and it is quite readable in big screens, such as a laptop or a tablet. However, in a mobile one has to zoom it until he sees what is written there. I want to make it scalable, but it looks like I don't know how to do it. Here is the HTML.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Login&lt;/title&gt;
    &lt;style&gt;
    .big {
      width:100%;
      text-align:center;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
     &lt;form name="form1" action="enter.php" method="post"&gt;
      &lt;table class="big"&gt;
        &lt;tr&gt;
          &lt;td colspan="2"&gt;
           &lt;img src="http://www.lipsum.com/images/banners/grey_234x60.gif"&gt;
          &lt;/td&gt;
         &lt;/tr&gt;
          &lt;td align="right"&gt;Name:&lt;/td&gt;
          &lt;td align="left"&gt;&lt;input id="Username" name="Username" size="25" type="text"&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td align="right"&gt;Pass:&lt;/td&gt;
          &lt;td align="left"&gt;&lt;input id="Password" name="Password" size="25" type="password"&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;&lt;input type="submit" value="Sumbit"&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
     &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>