Making form one column-CodePudding

Form is currently two columns, making the UI look awkward given there are just two form fields. I'm looking to make the field just one column given there are only two fields. How can I adjust?

Believe it has something to do with display: flex; but every alternate option I try, does not seem to work

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

body {
  background: #FFFFFF !important;
  min-height: 100vh;
  display: flex;
  font-weight: 400;
  font-family: 'Inter'
}

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

.auth-wrapper {
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: left;
}

.auth-inner {
  width: 1000px;
  margin: auto;
  background: #ffffff;
  padding: 40px 55px 45px 55px;
  border-radius: 15px;
  transition: all .3s;
}

.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;
  padding-bottom: 20px;
}

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

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

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

.btn btn-primary btn-block {
  color: #FBB381 !important;
}

.col-left {
  width: 50%;
  float: left;
}

.col-right {
  width: 50%;
  float: right;
}

form {
  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 h3,
form h4,
form p,
form button {
  grid-column: span 2;
  /* lets those elements span both columns */
}

.form-group {
  display: flex;
  flex-direction: column;
  /* 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
}

<form>
  <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>
  <div className="form-group">
    <div className="custom-control custom-checkbox">
      <input type="checkbox" className="custom-control-input" id="customCheck1" />
      <label className="custom-control-label" htmlFor="customCheck1">Remember me</label>
    </div>
  </div>
  <button type="submit" className="button">Login</button>
  <p className="forgot-password text-right">
    Forgot <a href="/">password?</a>
  </p>
</form>

CodePudding user response：

Use class instead of className. Also, you are using a CSS-grid which is splitting it into two columns. Change grid to flex on form and use a column flex-direction.

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

body {
  background: #FFFFFF !important;
  min-height: 100vh;
  display: flex;
  font-weight: 400;
  font-family: 'Inter'
}

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

.auth-wrapper {
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: left;
}

.auth-inner {
  width: 1000px;
  margin: auto;
  background: #ffffff;
  padding: 40px 55px 45px 55px;
  border-radius: 15px;
  transition: all .3s;
}

.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;
  padding-bottom: 20px;
}

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

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

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

.btn btn-primary btn-block {
  color: #FBB381 !important;
}

.col-left {
  width: 50%;
  float: left;
}

.col-right {
  width: 50%;
  float: right;
}

form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* creates a gap between the columns and rows */
}

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

.form-group {
  display: flex;
  flex-direction: column;
  /* 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
}

<form>
  <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>
  <div >
    <div >
      <input type="checkbox"  id="customCheck1" />
      <label  htmlFor="customCheck1">Remember me</label>
    </div>
  </div>
  <button type="submit" >Login</button>
  <p >
    Forgot <a href="/">password?</a>
  </p>
</form>

CodePudding user response：

CHANGES MADE

Change all ClassName to Class
Change form from:

form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 50px; }

 form {
  display: flex;
  flex-direction: column;
}