Form fields shrinking too small on mobile

Question

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

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

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

Answer 1

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 a 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 class="auth-wrapper">
    <div class="auth-inner">
      <form class="form-login">
        <div class="login">
          <h4>Sign In</h4>
          <div class="form-group">
            <label>Email address</label>
            <input type="email" class="form-control" placeholder="Enter email" />
          </div>
          <div class="form-group">
            <label>Password</label>
            <input type="password" class="form-control" placeholder="Enter password" />
          </div>
          <button type="submit" class="button">Login</button>
          <p class="forgot-password text-right">
            Forgot <a href="/">password?</a>
          </p>
        </div>
      </form>
    </div>
  </div>
</div>