Home > front end >  Form fields shrinking too small on mobile
Form fields shrinking too small on mobile

Time：02-23

Currently, my form looks as I want it to on the desktop. Example below

enter image description here

However, when condensed down on mobile, the form fields appear way too tight together

enter image description here

How can I have better control over how the form fields appear (width) on mobile. Would this also be media queries, or is there something wrong in my code that is causing the form fields width to become too tight when on mobile?

@import url('https://fonts.googleapis.com/css?family=Inter:400,500,600,700,800,900');
* {
  box-sizing: border-box;
}

.padding {
  background: #f0f0f0 !important;
  min-height: 100vh;
  display: flex;
  font-weight: 400;
  font-family: 'Inter';
  -left: 20vw;
  min-width: 100%;
}

h2,
h3,
h4,
h5,
h6,
label,
span {
  font-weight: 500;
  font-family: 'inter';
}

body,
html,
.App,
#root,
.auth-wrapper {
  width: 100%;
  height: 100%;
}

p {
  font-family: Inter;
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  line-height: 28px;
  color: #939599;
}

h1 {
  font-family: Inter;
  font-weight: 800;
  font-size: 24px;
  line-height: 40px;
  color: #494D61;
}

.navbar-light {
  background-color: #ffffff;
}

.Logo {
  margin-top: 2vh;
}

.auth-wrapper {
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: left;
  background: #ffffff;
  margin: 8vw 0;
  position: center;
  align-items: center;
  justify-content: center;
}

.auth-inner {
  width: 1000px;
  margin: auto;
  background: #ffffff;
  margin: 40px 55px 45px 55px;
  border-radius: 15px;
  transition: all .3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-wrapper .form-control:focus {
  border-color: #FBB381;
  box-shadow: none;
}

.auth-wrapper .form-control {
  background-color: #F8F8F8;
  border-color: #EBEBEB;
}

.auth-wrapper h3 {
  text-align: center;
  margin: 0;
  line-height: 1;
  margin-bottom: 20px;
}

.custom-control-label {
  font-weight: 400;
}

.forgot-password,
.forgot-password a {
  text-align: right;
  font-size: 13px;
  margin-top: 10px;
  color: #7f7d7d;
  margin: 0;
}

.forgot-password a {
  color: #FBB381;
}

.form-group:not(:nth-of-type(1)) {
  margin: 5px 0;
}

.form-signup {
  display: grid;
  /* to use css-grid */
  grid-template-columns: 1fr 1fr;
  /* creates 2 columns */
  gap: 10px 50px;
  /* creates a gap between the columns and rows */
}

.form-login {
  display: flex;
  /* to use css-grid */
  width: 35vw;
  gap: 10px 50px;
  /* creates a gap between the columns and rows */
}

form.form-login .login>div.form-group {
  margin: 15px 0px;
}

form h3,
form h4,
form p,
form button {
  grid-column: span 2;
  /* lets those elements span both columns */
}

.signup-button {
  grid-column: span 2;
  /* lets those elements span both columns */
  background-color: #FBB381;
  border-radius: 5px;
  border: #FBB381;
  height: 50px;
  color: white
}

.login {
  display: flex;
  flex-direction: column;
  width: 75vw;
  /* flexbox is sued to palce the label and input below each other and allows the input to fill out the entrie width */
}

.button {
  background-color: #FBB381;
  border-radius: 5px;
  border: #FBB381;
  height: 50px;
  color: white;
}

.login-button {
  background-color: #FBB381;
  border-radius: 5px;
  border: #FBB381;
  height: 50px;
  color: white;
  margin-top: 15px;
  border-radius: 5px;
}

.sidebar-container {
  min-height: 100vh;
  background-color: lightgray;
}

.sidebar {
  padding-top: 15px;
}

.sidebar-link {
  padding: 0px;
}

.sidebar-link:hover {
  border-right: 5px solid #FBB381;
  background-color: gainsboro;
}
import React, { Component } from "react"; import TopNav from "./TopNav" export default class Login extends Component { render() { return (

<div>
  <TopNav />

  <div className="auth-wrapper">
    <div className="auth-inner">
      <form className="form-login">

        <div className="login">
          <h4>Sign In</h4>
          <div className="form-group">
            <label>Email address</label>
            <input type="email" className="form-control" placeholder="Enter email" />
          </div>
          <div className="form-group">
            <label>Password</label>
            <input type="password" className="form-control" placeholder="Enter password" />

          </div>


          <button type="submit" className="button">Login</button>
          <p className="forgot-password text-right">
            Forgot <a href="/">password?</a>
          </p>
        </div>
      </form>
    </div>
  </div>
</div>
); } }

CodePudding user response：

You can set a min-width on your <form>.

Flex will shrink all the way down with the browser, and min-width allows it still to shrink, but stop shrinking at the desired width.

@import url('https://fonts.googleapis.com/css?family=Inter:400,500,600,700,800,900');
* {
  box-sizing: border-box;
}

.padding {
  background: #f0f0f0 !important;
  min-height: 100vh;
  display: flex;
  font-weight: 400;
  font-family: 'Inter';
  -left: 20vw;
  min-width: 100%;
}

h2,
h3,
h4,
h5,
h6,
label,
span {
  font-weight: 500;
  font-family: 'inter';
}

body,
html,
.App,
#root,
.auth-wrapper {
  width: 100%;
  height: 100%;
}

p {
  font-family: Inter;
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  line-height: 28px;
  color: #939599;
}

h1 {
  font-family: Inter;
  font-weight: 800;
  font-size: 24px;
  line-height: 40px;
  color: #494D61;
}

.navbar-light {
  background-color: #ffffff;
}

.Logo {
  margin-top: 2vh;
}

.auth-wrapper {
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: left;
  background: #ffffff;
  margin: 8vw 0;
  position: center;
  align-items: center;
  justify-content: center;
}

.auth-inner {
  width: 1000px;
  margin: auto;
  background: #ffffff;
  margin: 40px 55px 45px 55px;
  border-radius: 15px;
  transition: all .3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-wrapper .form-control:focus {
  border-color: #FBB381;
  box-shadow: none;
}

.auth-wrapper .form-control {
  background-color: #F8F8F8;
  border-color: #EBEBEB;
}

.auth-wrapper h3 {
  text-align: center;
  margin: 0;
  line-height: 1;
  margin-bottom: 20px;
}

.custom-control-label {
  font-weight: 400;
}

.forgot-password,
.forgot-password a {
  text-align: right;
  font-size: 13px;
  margin-top: 10px;
  color: #7f7d7d;
  margin: 0;
}

.forgot-password a {
  color: #FBB381;
}

.form-group:not(:nth-of-type(1)) {
  margin: 5px 0;
}

.form-signup {
  display: grid;
  /* to use css-grid */
  grid-template-columns: 1fr 1fr;
  /* creates 2 columns */
  gap: 10px 50px;
  /* creates a gap between the columns and rows */
}

.form-login {
  min-width: 350px;
  display: flex;
  /* to use css-grid */
  width: 35vw;
  gap: 10px 50px;
  /* creates a gap between the columns and rows */
}

form.form-login .login>div.form-group {
  margin: 15px 0px;
}

form h3,
form h4,
form p,
form button {
  grid-column: span 2;
  /* lets those elements span both columns */
}

.signup-button {
  grid-column: span 2;
  /* lets those elements span both columns */
  background-color: #FBB381;
  border-radius: 5px;
  border: #FBB381;
  height: 50px;
  color: white
}

.login {
  display: flex;
  flex-direction: column;
  width: 75vw;
  /* flexbox is sued to palce the label and input below each other and allows the input to fill out the entrie width */
}

.button {
  background-color: #FBB381;
  border-radius: 5px;
  border: #FBB381;
  height: 50px;
  color: white;
}

.login-button {
  background-color: #FBB381;
  border-radius: 5px;
  border: #FBB381;
  height: 50px;
  color: white;
  margin-top: 15px;
  border-radius: 5px;
}

.sidebar-container {
  min-height: 100vh;
  background-color: lightgray;
}

.sidebar {
  padding-top: 15px;
}

.sidebar-link {
  padding: 0px;
}

.sidebar-link:hover {
  border-right: 5px solid #FBB381;
  background-color: gainsboro;
}
<div>
  <TopNav />

  <div >
    <div >
      <form >
        <div >
          <h4>Sign In</h4>
          <div >
            <label>Email address</label>
            <input type="email"  placeholder="Enter email" />
          </div>
          <div >
            <label>Password</label>
            <input type="password"  placeholder="Enter password" />
          </div>
          <button type="submit" >Login</button>
          <p >
            Forgot <a href="/">password?</a>
          </p>
        </div>
      </form>
    </div>
  </div>
</div>

CodePudding user response：

Also, you can use media query for different sizes. I removed some codes from your CSS(Note to.auth-innerand html,body,.auth-wrapper ...) and from your HTML:

@import url('https://fonts.googleapis.com/css?family=Inter:400,500,600,700,800,900');
* {
  box-sizing: border-box;
}

.padding {
  background: #f0f0f0 !important;
  min-height: 100vh;
  display: flex;
  font-weight: 400;
  font-family: 'Inter';
  -left: 20vw;
  min-width: 100%;
}

h2,
h3,
h4,
h5,
h6,
label,
span {
  font-weight: 500;
  font-family: 'inter';
}
/*
body,
html,
.App,
#root,
.auth-wrapper {
  width: 100%;
  height: 100%;
} removed
*/ 
p {
  font-family: Inter;
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  line-height: 28px;
  color: #939599;
}

h1 {
  font-family: Inter;
  font-weight: 800;
  font-size: 24px;
  line-height: 40px;
  color: #494D61;
}

.navbar-light {
  background-color: #ffffff;
}

.Logo {
  margin-top: 2vh;
}

.auth-wrapper {
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: left;
  background: #ffffff;
  margin: 8vw 0;
  position: center;
  align-items: center;
  justify-content: center;
}

.auth-inner {
  /* width: 1000px; removed */
  margin: auto;
  background: #ffffff;
  margin: 40px 55px 45px 55px;
  border-radius: 15px;
  transition: all .3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-wrapper .form-control:focus {
  border-color: #FBB381;
  box-shadow: none;
}

.auth-wrapper .form-control {
  background-color: #F8F8F8;
  border-color: #EBEBEB;
}

.auth-wrapper h3 {
  text-align: center;
  margin: 0;
  line-height: 1;
  margin-bottom: 20px;
}

.custom-control-label {
  font-weight: 400;
}

.forgot-password,
.forgot-password a {
  text-align: right;
  font-size: 13px;
  margin-top: 10px;
  color: #7f7d7d;
  margin: 0;
}

.forgot-password a {
  color: #FBB381;
}

.form-group:not(:nth-of-type(1)) {
  margin: 5px 0;
}

.form-signup {
  display: grid;
  /* to use css-grid */
  grid-template-columns: 1fr 1fr;
  /* creates 2 columns */
  gap: 10px 50px;
  /* creates a gap between the columns and rows */
}

.form-login {
  display: flex;
  /* to use css-grid */
  width: 35vw;
  gap: 10px 50px;
  /* creates a gap between the columns and rows */
}

form.form-login .login>div.form-group {
  margin: 15px 0px;
}

form h3,
form h4,
form p,
form button {
  grid-column: span 2;
  /* lets those elements span both columns */
}

.signup-button {
  grid-column: span 2;
  /* lets those elements span both columns */
  background-color: #FBB381;
  border-radius: 5px;
  border: #FBB381;
  height: 50px;
  color: white
}

.login {
  display: flex;
  flex-direction: column;
  width: 75vw;
  /* flexbox is sued to palce the label and input below each other and allows the input to fill out the entrie width */
}

.button {
  background-color: #FBB381;
  border-radius: 5px;
  border: #FBB381;
  height: 50px;
  color: white;
}

.login-button {
  background-color: #FBB381;
  border-radius: 5px;
  border: #FBB381;
  height: 50px;
  color: white;
  margin-top: 15px;
  border-radius: 5px;
}

.sidebar-container {
  min-height: 100vh;
  background-color: lightgray;
}

.sidebar {
  padding-top: 15px;
}

.sidebar-link {
  padding: 0px;
}

.sidebar-link:hover {
  border-right: 5px solid #FBB381;
  background-color: gainsboro;
}

@media screen and (max-width: 900px){
    .form-login{
        width: 50vw;
    }
}
@media screen and (max-width: 600px){
    .form-login{
        width: 70vw;
    }
}
@media screen and (max-width: 400px){
    .form-login{
        width: 90vw;
    }
}
<div>
  <div >
    <div >
      <form >

        <div >
          <h4>Sign In</h4>
          <div >
            <label>Email address</label>
            <input type="email"  placeholder="Enter email" />
          </div>
          <div >
            <label>Password</label>
            <input type="password"  placeholder="Enter password" />

          </div>


          <button type="submit" >Login</button>
          <p >
            Forgot <a href="/">password?</a>
          </p>
        </div>
      </form>
    </div>
  </div>
</div>

Page link：https//www.codepudding.com/frontend/312261.html

Prev:Finding the correct HTML tag for data scraping in python
Next:How can I write a link with multiple lines in Markdown?
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding