[ad_1]
このログイン フォームをレスポンシブにできません
デスクトップビューでは問題なく見えますが、スマートフォンでは同じように見えません
htmlとCSSで作ってみたのですが、スマホで開くと幅か高さが問題のようです
これがhtmlコードです
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 コード
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; }
私が試したこと:
overflow:hidden; を使用してみました。 @media width but.それはうまくいきませんでしたスマートフォンのデスクトップのビューとしてこれをレスポンシブにしたい
ありがとうございました
解決策 1
HTML フォームを小型デバイス向けにレスポンシブにするために、次の CSS ルールをコードに追加できます。
@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; } }
[ad_2]
コメント