2

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.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;
}
<center>
<div class = "div" id = "div">
<img src="https://i.stack.imgur.com/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.

5 Answers5

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)
Munim Munna
  • 17,178
  • 6
  • 29
  • 58
  • Thanks but this is not working. Also, I don't want two sites for one web page. –  Mar 02 '18 at 16:57
  • The link I gave is not working, add the CSS block at the bottom of your other CSS, then see. This block will only activate when screen size is 360px. same site will appear different in desktop and mobile. – Munim Munna Mar 02 '18 at 16:58
  • But what will happen if this site is opened in any other smartphone? –  Mar 02 '18 at 17:02
  • That is the pain of the web developers, you need different CSS media query blocks for different screen sizes. this block I gave you is for 360px screen size, you can add more of them for 480px, 720px etc. And if you want to save all troubles and time, learn [Bootstrap](https://www.w3schools.com/bootstrap/default.asp). It does all the hard work for you. – Munim Munna Mar 02 '18 at 17:05
  • Sir, please help me in this question : https://stackoverflow.com/questions/48890876/how-to-combine-to-prompts-into-one –  Mar 06 '18 at 06:12
1

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.

Willem van der Veen
  • 33,665
  • 16
  • 190
  • 155
  • Thank you WillemvanderVeen but I need code for my web page. Please don't feel bad. –  Feb 21 '18 at 14:07
  • I hope you it helps you a bit, media queries are the essential tool provided by CSS to build a responsive design ;) – Willem van der Veen Feb 21 '18 at 14:10
  • Yes, it helped me to learn a new concept. I am very very extremely thankful to you. –  Feb 21 '18 at 14:12
1

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!

baeyun
  • 228
  • 1
  • 6
0

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.

ardev
  • 653
  • 2
  • 6
  • 19
  • Thank you sir. But there is one problem. I a desktop computer, width is greater than its height whereas in a smartphone, height is longer. –  Feb 22 '18 at 09:11
  • Yes that is true; however you aren't setting your width to be something relative to the height but only relative to the width as defined by the parent, which can be set to be defined as a percentage of the screen resolution in its own right. In terms of adapting to a different screen size to appear exactly as you want, the suggestion to use percentages and to separate your code can be improved by also using media queries to conditionally change the percentages and in doing so, change the layout flow, depending upon the screen resolution of the viewing device. – ardev Feb 26 '18 at 20:37
0

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.stack.imgur.com/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.stack.imgur.com/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.stack.imgur.com/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>
Sakata Gintoki
  • 1,817
  • 16
  • 23
  • It isn't working. However, thanks for devoting time in this question. –  Mar 05 '18 at 16:28