title: How to get same results in different devices?
body: <p>I had created a form page using html, css, javascript. It looks good in my computer but it looks very bad in a mobile phone. The elements get out of the white box(div) and the page looks like a mess. So, I want that the same page should be displayed in a mobile phone as it is displayed in a computer. Can you please help? I am only 13-years old and so I am not introduced much to html, js, css. But I know the very basic part of them. Thanks in advance.</p>
  
  <p>Here is my code:</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-js lang-js prettyprint-override"><code>var height = screen.height;
  var width = screen.width;
  var tm = height * (1/8);
  document.body.style.marginTop = tm + "px"
  var div = document.getElementById("div");
  var height1 = height * (5/8);
  div.style.height = height1 + "px";
  var width1 = width * (5/16);
  div.style.width = width1 + "px";
  
  function f() {
  var m = document.getElementById("checkbox");
  if(m.checked)
  {
  var x = document.getElementById("password");
  x.setAttribute("type","text");
  } 
  else
  { 
  var s = document.getElementById("password");
  s.setAttribute("type","password");
  }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.div {
  padding: 50px;
  border: 1px solid white;
  background-color: white;
  box-sizing: border-box;
  }
  body {
  background-color:#D3D3D3;
  }
  
  .email {
  background-color:transparent;
  float:left; height: 30px;
  width: 300px;
  font-size: 18pt;
  padding-left:40px;
  background-image:url("https://i.stack.imgur.com/qXEoC.png");
  background-repeat:no-repeat;
  border:none;
  border-bottom: 1px solid gray;
  }
  .password {
  background-color:transparent;
  float:left; height: 30px;
  width: 300px;
  font-size: 18pt;
  padding-left:40px;
  background-image:url("https://i.stack.imgur.com/pCUk4.png");
  background-repeat:no-repeat;
  border:none;
  border-bottom: 1px solid gray;
  }
  .submit {
  float:right;
  background-color:#4285F4;
  border:none;
  color:white;
  border-radius:3px;
  font-weight: bold;
  height: 35px;
  width:100px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;center&gt;
  &lt;div class = "div" id = "div"&gt;
  &lt;img src="https://i.stack.imgur.com/JgTM1.gif" style="float:left;"&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
  &lt;p style="font-size:25px; font-family:Arial; text-align:left"&gt;
  Sign in
  &lt;/p&gt;
  &lt;p style="font-size:20px; font-family:Arial; text-align:left" &gt;
  with your Account
  &lt;/p&gt;
  &lt;form action="page.php" method="post"&gt;
  &lt;input type="email" id="email" placeholder="Email" name="email" class="email" autocomplete="off"&gt;
  &lt;br&gt;&lt;br&gt;&lt;br&gt;
  &lt;input type="password" id="password" placeholder="Password" name="password" class="password" autocomplete="off"&gt;
  &lt;br&gt;&lt;br&gt;&lt;br&gt;
  &lt;input type="checkbox" id="checkbox" onChange="f()" style="float:left"&gt;&lt;div style="float:left"&gt;Show Password&lt;/div&gt;
  &lt;br&gt;&lt;br&gt;&lt;br&gt;
  &lt;button type="submit" id="submit" class="submit"&gt;NEXT&lt;/button&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  &lt;/center&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I want code. Please help.</p>