Achieving consistent outcomes across various devices: What's the secret?

Question

Achieving consistent outcomes across various devices: What's the secret?

Hey there, I am facing an issue with my form page that I created using HTML, CSS, and Javascript. It looks good on my computer but appears messy on a mobile phone. The elements are getting out of the white box (div) making the entire page look chaotic. Since I am just 13 years old and not very well-versed in HTML, JS, CSS, I would really appreciate some help in ensuring that the page displays the same way on both computer and mobile. Can you assist me with this? Many thanks in advance.

Below is the code snippet:

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 could really use some help with the code. Any assistance would be greatly appreciated.

javascript html css

Answer 1

Answer №1

Responsive Web Design is the key to creating a page that adapts to any screen size. One important rule in responsive design is to avoid using fixed height/width for elements like

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

This can cause input elements to overflow their parent container on small screens. Instead, use percentage height/width for your elements

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

By doing this, email and password input boxes will always take up 80% of their container's width regardless of screen size.

However, for very small screens, additional CSS needs to be written. This is where CSS Media Queries come into play. Within these queries, you may need to remove or resize elements, adjust margins/paddings, and overall optimize styling for smaller screens.

@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;
  }
}

Place this block at the end of your CSS file to ensure these rules activate when needed, preventing your page from breaking on tiny screens.

Further Reading

These are just the basics of responsive design concepts. To create professional websites, delve deeper into responsive design frameworks and further educate yourself:

Responsive Web Design - Introduction. (go through all tutorials)
Bootstrap 4 Tutorial (highly recommended for learning)

Answer 2

Responsive Web Design is the key to creating a page that adapts to any screen size. One important rule in responsive design is to avoid using fixed height/width for elements like

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

This can cause input elements to overflow their parent container on small screens. Instead, use percentage height/width for your elements

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

By doing this, email and password input boxes will always take up 80% of their container's width regardless of screen size.

However, for very small screens, additional CSS needs to be written. This is where CSS Media Queries come into play. Within these queries, you may need to remove or resize elements, adjust margins/paddings, and overall optimize styling for smaller screens.

@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;
  }
}

Place this block at the end of your CSS file to ensure these rules activate when needed, preventing your page from breaking on tiny screens.

Further Reading

These are just the basics of responsive design concepts. To create professional websites, delve deeper into responsive design frameworks and further educate yourself:

Responsive Web Design - Introduction. (go through all tutorials)
Bootstrap 4 Tutorial (highly recommended for learning)

Answer 3

Answer №2

Implement CSS media queries to adjust styling of elements based on screen size. Here's an 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;
    }
}

Try resizing the window to see the changes, best viewed in full screen

For more information on media queries, visit here.

Answer 4

Implement CSS media queries to adjust styling of elements based on screen size. Here's an 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;
    }
}

Try resizing the window to see the changes, best viewed in full screen

For more information on media queries, visit here.

Answer 5

Answer №3

Although I also faced that challenge, it seems like you have made significant progress. However, the key thing you might be overlooking is the concept of Responsive Web Design. I recommend exploring CSS Media Queries, as they are primarily focused on adapting to different screen sizes. You may also find helpful resources on sites like csstricks.com, code snippets on codepen, or even tutorials on w3schools if you need additional guidance.

Keep learning, stay passionate about coding, and continue putting in the effort!

Answer 6

Although I also faced that challenge, it seems like you have made significant progress. However, the key thing you might be overlooking is the concept of Responsive Web Design. I recommend exploring CSS Media Queries, as they are primarily focused on adapting to different screen sizes. You may also find helpful resources on sites like csstricks.com, code snippets on codepen, or even tutorials on w3schools if you need additional guidance.

Keep learning, stay passionate about coding, and continue putting in the effort!

Answer 7

Answer №4

You may want to consider adjusting the width values of your sub elements to be a percentage rather than a fixed pixel amount. For instance:

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

This approach allows the width to adapt to the size of the container element, providing a more responsive layout.

Furthermore, it is recommended to specify the dimensions (height and width) of your div elements in your CSS. While it's commendable that you are aware of targeting element attributes in JS, it's important to adhere to the principle of 'separation of concerns' in Development. In the context of web development, this principle emphasizes: HTML for structure CSS for appearance and style JS for interactivity and dynamic behavior.

By following this separation, you can streamline the development process and easily navigate between different aspects of your application.

Answer 8

You may want to consider adjusting the width values of your sub elements to be a percentage rather than a fixed pixel amount. For instance:

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

This approach allows the width to adapt to the size of the container element, providing a more responsive layout.

Furthermore, it is recommended to specify the dimensions (height and width) of your div elements in your CSS. While it's commendable that you are aware of targeting element attributes in JS, it's important to adhere to the principle of 'separation of concerns' in Development. In the context of web development, this principle emphasizes: HTML for structure CSS for appearance and style JS for interactivity and dynamic behavior.

By following this separation, you can streamline the development process and easily navigate between different aspects of your application.

Answer 9

Answer №5

I utilized the snippet codes you provided and made updates to them, creating a set of new codes. It is a fundamental aspect that for these codes to function effectively across all devices, clarity in their implementation is essential.

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 10

I utilized the snippet codes you provided and made updates to them, creating a set of new codes. It is a fundamental aspect that for these codes to function effectively across all devices, clarity in their implementation is essential.

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>

Achieving consistent outcomes across various devices: What's the secret?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Can you explain the exact purpose of npm install --legacy-peer-deps? When would it be advisable to use this command, and what are some potential scenarios where it

Simple Method to Retrieve one document from Firebase v9 in a React Application

Incorrect posture during the movements

Ways to create an overlapping effect for 3 elements using CSS

Implementing a fixed top navigation bar with jQuery to override default CSS properties

When attempting to access an API hosted on Cloudflare from Heroku, a 403 error is returned

The error message "ReferenceError: express is not defined" indicates that Node.js is

Unable to transmit Javascript array to PHP using Ajax

Encountered a problem while parsing an XML file using JavaScript from an external server

Set styles to child elements of an external component using styled-components

What is the process for extracting HTML code from a website and converting it into a string for use in VB?

Enhancing your design with animated borders on hover

Create a basic cache within an AngularJS service to store data retrieved from HTTP requests, ensuring that the cache returns an object

How can I retain the selected item's information from a list in React JS when navigating to the next page?

Vuejs is throwing an error claiming that a property is undefined, even though the

Employing Bootstrap, incorporate a vertical divider in the center to split three icons on the left and three icons on the right, all while ensuring the design remains responsive

The Express Generator is having trouble detecting the routes within the users file when using app.use('/login', users)

Nextjs compilation error - Unable to locate module: Cannot resolve 'module'

Tips for accessing $parent of ng-repeat from ng-include

How can you make divs adapt to screen resizing in a similar way to images?