responsive html and css code with any devices-CodePudding

I want to render my screen responsive with any kind of device, so my code display very good on a big screen but not the same thing with the young screen so I want my screen to be fitted for all sizes.I spend a lot of time to target it but I can't found any solution my code:

* {
  box-sizing: border-box;
  padding: 0%;
  margin: 0%;
  background-color: #dfe3ee;
}

.text {
  float: left;
  margin-top: 200px;
  margin-left: 160px;
  font-size: 2rem;
  font-family: sans-serif;
  color: rgb(100, 5, 5)
}

form {
  border: 3px solid #f1f1f1;
  width: 30%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  margin-top: 5rem;
  margin-right: 250px;
  float: right;
}

input[type=text],
input[type=password] {
  width: 90%;
  padding: 8px 12px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

button {
  background-color: #04AA6D;
  color: white;
  padding: 8px 10px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}

button:hover {
  opacity: 0.8;
}


/* Extra style for the cancel button (red) */


/* Center the avatar image inside this container */

.container {
  padding: 16px;
}


/* The "Forgot password" text */

span.psw {
  float: right;
  padding-top: 16px;
}

@media screen and (max-width: 600px) {
  span.psw {
    display: block;
    float: right;
  }
  .form {
    border: 3px solid #f1f1f1;
    width: 30%;
    display: flex;
  }
}

import {Link} from "react-router-dom"; const RegisterPage =() => { return (
<div>
  <div className="text">
    <h1>Private</h1>
  </div>
  <form>


    <div >
      <label for="uname"><b>Username</b></label>
      <input type="text" placeholder="Enter Username" name="uname" required />

      <label for="psw"><b>Password</b></label>
      <input type="password" placeholder="Enter Password" name="psw" required />

      <button type="submit">Login</button>
      <label>
            <input type="checkbox" checked="checked" name="remember" /> Remember me
          </label>
    </div>

    <div className="container" style={{ "backgroundColor": "#f1f1f1"}}>

      <a href="">Forgot password?</a>
      <div className="btn">
        <button>Create New Account</button>
      </div>
    </div>
  </form>
</div>
) }; export default RegisterPage;

CodePudding user response：

Check this out, I added flexbox for your main div and modified your media query part with flexbox and removed margins. Keep in mind I changed className with class for snipping, for testing in your local you should change them again with className

* {
 box-sizing:border-box; 
  padding: 0%;
  margin: 0%;
  background-color: #dfe3ee;
}

.mainDiv {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.text{
  float: left;
  font-size: 2rem;
  font-family: sans-serif;
  color:rgb(100, 5, 5)
}

form {
  border: 3px solid #f1f1f1;
  width: 30%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}


input[type=text], input[type=password] {
  width: 90%;
  padding: 8px 12px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}


button {
  background-color: #04AA6D;
  color: white;
  padding: 8px 10px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}


button:hover {
  opacity: 0.8;
}

/* Extra style for the cancel button (red) */


/* Center the avatar image inside this container */





.container {
  padding: 16px;
}

/* The "Forgot password" text */
span.psw {
  float: right;
  padding-top: 16px;
}


@media screen and (max-width: 600px) {
  .mainDiv {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .text {
    margin-left: 0;
  }
  span.psw {
    display: block;
    float: right;
  }
  form{
    border: 3px solid #f1f1f1;
    width: 30%;
    display: flex;
    float: none;
    margin-right: 0;
    min-width: 250px;
  }
}

<div >
           <div  >
      <h1>Private</h1>
      </div>
        <form >
      
        
        <div >
          <label for="uname"><b>Username</b></label>
          <input type="text" placeholder="Enter Username" name="uname" required />
      
          <label for="psw"><b>Password</b></label>
          <input type="password" placeholder="Enter Password" name="psw" required />
      
          <button type="submit">Login</button>
          <label>
            <input type="checkbox" checked="checked" name="remember" /> Remember me
          </label>
        </div>
      
        <div className="container" style={{"backgroundColor":"#f1f1f1"}}>
         
          <a href="" >Forgot password?</a>
          <div className="btn" >
          <button >Create New Account</button>
          </div>
        </div>
      </form>
      </div>