How to get same results in different devices?

Question

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.

Here is my 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");
}
}

.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.sstatic.net/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.sstatic.net/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;
}

<center>
<div class = "div" id = "div">
<img src="https://i.sstatic.net/JgTM1.gif" style="float:left;"><br><br><br>
<p style="font-size:25px; font-family:Arial; text-align:left">
Sign in
</p>
<p style="font-size:20px; font-family:Arial; text-align:left" >
with your Account
</p>
<form action="page.php" method="post">
<input type="email" id="email" placeholder="Email" name="email" class="email" autocomplete="off">
<br><br><br>
<input type="password" id="password" placeholder="Password" name="password" class="password" autocomplete="off">
<br><br><br>
<input type="checkbox" id="checkbox" onChange="f()" style="float:left"><div style="float:left">Show Password</div>
<br><br><br>
<button type="submit" id="submit" class="submit">NEXT</button>
</form>
</div>
</center>

I want code. Please help.

Answer 1

I copied your snippet codes and updated then, you can use it as new codes. This is so basic, if you want it work for you in all devices you have to make it clear first.

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");
}
}

.div {
padding: 5%;
border: 1px solid white;
background-color: white;
box-sizing: border-box;
}
body {
background-color:#D3D3D3;
}

.email {
display: inline-block;
padding-left:40px;
background-color:transparent;
height: 30px;
width: 100%;
font-size: 18pt;
background-image:url("https://i.sstatic.net/qXEoC.png");
background-repeat:no-repeat;
border:none;
border-bottom: 1px solid gray;
box-sizing: border-box;
}
.password {
display: inline-block;
padding-left:40px;
background-color:transparent;
height: 30px;
width: 100%;
font-size: 18pt;
padding-left:40px;
background-image:url("https://i.sstatic.net/pCUk4.png");
background-repeat:no-repeat;
border:none;
border-bottom: 1px solid gray;
box-sizing: border-box;
}
.submit {
float:right;
background-color:#4285F4;
border:none;
color:white;
border-radius:3px;
font-weight: bold;
height: 35px;
width:100px;
}

.header {
  font-family:Arial; text-align:left
}

.form {
  position: relative;
}

.form-row {
  width: 100%;
  margin-bottom: 15px;
  text-align: left;
}

<center>
<div class = "div" id = "div">
  <div class="header">
    <img class="head-img" src="https://i.sstatic.net/JgTM1.gif">
    <p style="font-size:25px;">
    Sign in
    </p>
    <p style="font-size:20px;" >
    with your Account
    </p>
  </div>
  <div class="form">
    <form action="page.php" method="post">
    <div class="form-row">
      <input type="email" id="email" placeholder="Email" name="email" class="email" autocomplete="off">
    </div>
    <div class="form-row">
      <input type="password" id="password" placeholder="Password" name="password" class="password" autocomplete="off">
    </div>
    <div class="form-row">
      <input type="checkbox" id="checkbox" onChange="f()" style="float:left; margin-right: 5px;">
      <div>Show Password</div>
    </div>
    <div class="form-row">
      <button type="submit" id="submit" class="submit">NEXT</button>
    </div>
    </form>
  </div>
</div>
</center>

Answer 2

Well I also suffered that plight, but as for what I can see, you've strode a great path. However, the point you're missing is what is called Responsive Web Design. I urge you to checkout CSS Media Queries because they mostly deal with view ratios etc. Also checkout sites like csstricks.com, pens on codepen or even w3schools if you can't cope with the rest.

Stay young, code more and keep up the effort!

Answer 3

What you are referring is called Responsive Web Design i.e design a page that fits to any and every screen. And the first Dont's of every responsive design concept is you don't use fixed height/width for elements like

.email,.password{
   width: 300px;
}

This will make your input elements overflow it's parent container when screen size is small. Choose Percentage height/width for your elements

.email,.password{
   width: 80%;
}

Now email and password input box will always take up 80% width of it's container no matter what the screen size is.

This will not still work for really small screen sizes. For that you need to write some extra CSS for those really small screens. These are called CSS Media Queries. Considering the very small size you might want to get rid of some elements, or even resize some elements, reduce the margins/paddings for some elements and put everything inside this Media Query block.

@media screen and (max-width: 360px) {
  body {
    margin-top: 4px !important
  }
  .div {
    padding: 10px;
    width: auto !important;
  }
  .email {
    width: 80%;
    font-size: 14pt;
  }
  .password {
    width: 80%;
    font-size: 14pt;
  }
}

Put this block at the bottom of your CSS file, and these rules will kick into action when the screen size is too small and save your page from breaking down.

Further Reading

These are all the basics I explained just to get along with responsive design concepts. For building Professional Websites you need to learn a bit more about it, and get started with responsive design frameworks.

1. Responsive Web Design - Introduction. (complete all the tutorials)
2. Bootstrap 4 Tutorial (you will not regret learning it)

Answer 4

You could change your width values of your sub elements to be a percentage. For example:

.email { ... width: 50%; ... }

That way your width will react to the width of the container element, instead of being explicitly described as a concrete pixel amount.

Additionally, you should define your div dimensions (height and width) within your CSS. That is impressive that you understand that you can target the element attributes in JS, but you are violating a rule of Development called the 'separation of concerns' On the web, specifically, this means basically: HTML is your structure CSS is for your appearance or style JS is for your interactivity or dynamic behavior.

This separation makes it easier to shift between concerns as you build your app.

Answer 5

Use CSS media queries to have elements styled differently based on screen size. For example:

@media screen and (max-width: 1000px) {
    body {
        background-color: blue;
    }
}

@media screen and (max-width: 600px) {
    body {
        background-color: purple;
    }
}

@media screen and (max-width: 400px) {
    body {
        background-color: green;
    }
}

Resize this window and see the effects N.B go full screen to see effect

More on media queries here.