How to make this HTML form responsive for small devices

Question

0.00/5 (No votes)

See more:

, +

I am unable to make this login form responsive
It looks fine in desktop view but it deosn't look same in smartphones
I've made this using html and CSS.It looks like the problem is with width or height in opening this on smartphones
here's the html code

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Login Form</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="center">
      <h1>Login</h1>
      <form method="post">
        <div class="txt_field">
          <input type="text" required>
          <span></span>
          <label>Username</label>
        </div>
        <div class="txt_field">
          <input type="password" required>
          <span></span>
          <label>Password</label>
        </div>
        <div class="pass"><a href="#">Forgot Password ?</a> </div>
        <input type="submit" value="Login">
        <div class="signup_link"><span id="extext">
          </span><a href="signup.html">Not a member? Signup</a>
        </div>
      </form>
    </div>

  </body>
</html>

CSS code

CSS

*{
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif;
}
body{
  margin: 0;
  padding: 0;
  background: linear-gradient(120deg,#4e718a, #3e9778);
  height: 100vh;
  overflow: hidden;
}
.center{
  position: relative;
  top: 50%;
  left: 50%;
  right: 50%;
  transform: translate(-50%, -50%);
  height: 459px;
  width: 359px;
  background: linear-gradient(120deg,#9b3438ce, #8f21a7e8);;
  border-radius: 10px;
  box-shadow: 10px 10px 15px rgb(56 45 45 / 84%);
}

.center h1{
  text-align: center;
  padding: 20px 0;
  border-bottom: 3px solid #93c398;
}
.center form{
  padding: 0 40px;
  box-sizing: border-box;
}
form .txt_field{
  position: relative;
  border-bottom: 2px solid #adadad;
  margin: 30px 0;
}
.txt_field input{
  width: 100%;
  padding: 0 5px;
  height: 40px;
  font-size: 16px;
  border: none;
  background: none;
  outline: none;
}
.txt_field label{
  position: absolute;
  top: 50%;
  left: 5px;
  color: #a4a2a2;
  transform: translateY(-40%);
  font-size: 16px;
  transition: .7s;
}
.txt_field span::before{
  content: '';
  position: absolute;
  top: 40px;
  left: 0;
  width: 0%;
  height: 2px;
  background: #0a8eb6;
  transition: .7s;
}
.txt_field input:focus ~ label,
.txt_field input:valid ~ label{
  top: -5px;
  color: 0a8eb6;
}
.txt_field input:focus ~ span::before,
.txt_field input:valid ~ span::before{
  width: 100%;
}
.pass a{
  text-decoration: none!important;
  color: #d1dcdc;
}
.pass  a:hover{
  text-decoration: none!important;
  font-size: 17.8px;
  font-weight: 80px;
}
.pass{
  text-align:right;
  font-size:17px;
  margin: -5px 0 15px;
}
input[type="submit"]{
  width: 100%;
  height: 50px;
  border: 1px solid;
  background: #2691d9;
  border-radius: 25px;
  font-size: 18px;
  color: #e9f4fb;
  font-weight: 700;
  cursor: pointer;
  outline: none;
}
input[type="submit"]:hover{
  border-color: #2691d9;
  transition: .5s;
}
.signup_link{
  margin: 30px 0;
  text-align: center;
  font-size: 16px;
  color: #666666;
}
.signup_link a{
  color: #a6a4a4;
  text-decoration: none;
}
.signup_link a:hover{
  text-decoration: underline;
  color: #b2afaf;
  font-size:17.8px;
}
.txlog{
  font-size:17px;
}
.txlog:hover{
  color: rgb(118, 145, 136);
  font-size: 16.7px;
  font-weight: 80px;
}

What I have tried:

I've tried using overflow:hidden; @media width but.It did not worked I want this to be reponsive as the view of desktop in smartphones
Thank you

Posted 10-Dec-22 4:56am

Nischal Shar

Updated 10-Dec-22 13:18pm

Add a Solution

Comments

Member 15627495 10-Dec-22 12:22pm

to have a better responsive, use rem/em/% ONLY.

if you use 'px' for size, you're fixing your design.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeGuru84 · Answer 1 · 2022-12-10T13:18:00

To make your HTML form responsive for small devices, you can add the following CSS rules to your code:

@media only screen and (max-width: 600px) {
  /* Make the form container smaller */
  .center {
    width: 80%;
    height: auto;
  }

  /* Make the inputs and labels smaller */
  form .txt_field {
    margin: 10px 0;
  }
  form .txt_field input {
    height: 30px;
    font-size: 14px;
  }
  form .txt_field label {
    font-size: 14px;
  }

  /* Make the submit button smaller */
  input[type="submit"] {
    height: 40px;
    font-size: 16px;
  }

  /* Make the signup link and password reset link smaller */
  .signup_link {
    font-size: 14px;
  }
  .pass {
    font-size: 15px;
  }
}