Home > Back-end >  how to make flex items align column when too large
how to make flex items align column when too large

Time：11-18

I have a signup form which is quite large.

I want to make the form input split up in the middle and go next to each other when it is larger than the screen height using flex (if that is even the proper way to do that).

Thanks for any kind of help and input.

i need to add more text to post so ignore this

example:

 ------------  
|    FORM    | 
|  --------  | 
| |        | |    when it is too large to fit completely
| |        | |     v
| |        | |    --------------------- 
| |        | |   |         FORM        |
|  --------  |   |  -------- --------  |
| |        | |   | |        |        | |
| |        | |   | |        |        | |
| |        | |   | |        |        | |
| |        | |   | |        |        | |
|  --------  |   |  -------- --------  |
|   submit   |   |       submit        |
 ------------     ---------------------

sorry for my confusing CSS

@font-face {
  font-family: 'eau';
  src: url('../fonts/eau.woff2') format('woff2'), url('../fonts/eau.woff') format('woff'), url('../fonts/eau.ttf') format('truetype');
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  --unfocused-color: rgb(238, 115, 38);
  --focused-color: #ee7326;
  --error-background: #ec6666;
  --error-color: white;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  background: #eaeaea;
  font-family: 'eau', sans-serif;
  position: relative;
}

.container {
  width: 25%;
  min-width: 350px;
  max-width: 50%;
  height: intrinsic;
  height: -webkit-fit-content;
  height: -moz-max-content;
  padding: 3em;
  border-radius: 24px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  text-align: center;
}

form h1 {
  text-transform: uppercase;
  font-weight: 500;
}

a {
  text-decoration: none;
  color: rgb(66, 0, 219);
  font-size: 80%;
}

.flex-parent {
  display: flex;
  flex-direction: column;
}

input[type='email'],
input[type='password'],
input[type='text'] {
  background: none;
  display: block;
  margin: 25px auto 0 auto;
  padding: 14px 10px;
  width: 70%;
  min-width: 100px;
  text-align: center;
  border: 2px solid var(--unfocused-color);
  border-radius: 24px;
  outline: none;
  color: black;
  transition: 0.25s;
}

input[type='email']:focus,
input[type='password']:focus,
input[type='text']:focus {
  width: 90%;
  border: 2px solid var(--focused-color);
}

input[type='submit'] {
  background: none;
  display: block;
  margin: 25px auto 0 auto;
  padding: 14px 10px;
  width: 50%;
  min-width: 100px;
  text-align: center;
  border: 2px solid var(--unfocused-color);
  border-radius: 24px;
  outline: none;
  color: black;
  transition: 0.25s;
}

input[class="password-reset-button"] { /* it breaks if i dont use [] */
  width: 60%;
  min-width: 120px;
  padding: 0;
  margin-top: 10px;
  border: none;
  color: rgb(66, 0, 219);
  font-size: 80%;
}

p {
  margin: 24px auto;
}

form .submitenabled:hover {
  background-color: var(--unfocused-color);
  color: white;
}

form .submitdisabled {
  color: white;
  border: 2px solid #6d6d6d;
  background-color: #6d6d6d;
}

.error {
  text-align: center;
  font-size: 80%;
  display: block;
  margin: 30px auto 0px auto;
  padding: 8px 4px;
  width: 100%;
  height: 20%;
  background-color: var(--error-background);
  color: var(--error-color);
  border-radius: 24px;
}

.displayNone {
  display: none;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../../styles/login-signup-style.css">
  <title>registreren</title>
</head>

<body>
  <div class="container">
    <form action="../../php/signup_handler.php" method="post" id="form">
      <h1>Account registreren</h1>
      <a href="../login">Inloggen</a>

      <div class="flex-parent">
        <div class="flex-item">
          <input type="email" name="email" placeholder="Email" id="email" required>

          <input type="text" name="first_name" placeholder="Voornaam" id="first_name" required>
          <input type="text" name="tussenvoegsel" placeholder="Tussenvoegsels" id="tussenvoegsel" required>
          <input type="text" name="last_name" placeholder="Achternaam" id="last_name" required>
        </div>

        <div class="flex-item">
          <input type="text" name="student_nr" placeholder="Student nummer" id="student_nr" required>
          <input type="text" name="class" placeholder="Klas" id="class" required>

          <input type="password" name="password" placeholder="Wachtwoord" id="pwd" required>
          <input type="password" name="confirmPassword" placeholder="Herhaal Wachtwoord" id="pwd2" required>
        </div>
      </div>

      <input type="submit" value="Maak account" class="submitenabled" id="submit">
    </form>
  </div>
  <script src="../../javascript/signup.js"></script>
</body>

</html>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Just use media query, doc.

This way it will switch to normal display flex, you could make the opposite way as well by adding column below a certain screen width.

@media screen and (min-width:800px){
  .flex-parent{
    flex-direction:row;
  }
}

DEMO

@font-face {
  font-family: 'eau';
  src: url('../fonts/eau.woff2') format('woff2'), url('../fonts/eau.woff') format('woff'), url('../fonts/eau.ttf') format('truetype');
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  --unfocused-color: rgb(238, 115, 38);
  --focused-color: #ee7326;
  --error-background: #ec6666;
  --error-color: white;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  background: #eaeaea;
  font-family: 'eau', sans-serif;
  position: relative;
}

.container {
  width: 25%;
  min-width: 350px;
  max-width: 50%;
  height: intrinsic;
  height: -webkit-fit-content;
  height: -moz-max-content;
  padding: 3em;
  border-radius: 24px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  text-align: center;
}

form h1 {
  text-transform: uppercase;
  font-weight: 500;
}

a {
  text-decoration: none;
  color: rgb(66, 0, 219);
  font-size: 80%;
}

.flex-parent {
  display: flex;
  flex-direction: column;
}

input[type='email'],
input[type='password'],
input[type='text'] {
  background: none;
  display: block;
  margin: 25px auto 0 auto;
  padding: 14px 10px;
  width: 70%;
  min-width: 100px;
  text-align: center;
  border: 2px solid var(--unfocused-color);
  border-radius: 24px;
  outline: none;
  color: black;
  transition: 0.25s;
}

input[type='email']:focus,
input[type='password']:focus,
input[type='text']:focus {
  width: 90%;
  border: 2px solid var(--focused-color);
}

input[type='submit'] {
  background: none;
  display: block;
  margin: 25px auto 0 auto;
  padding: 14px 10px;
  width: 50%;
  min-width: 100px;
  text-align: center;
  border: 2px solid var(--unfocused-color);
  border-radius: 24px;
  outline: none;
  color: black;
  transition: 0.25s;
}

input[class="password-reset-button"] { /* it breaks if i dont use [] */
  width: 60%;
  min-width: 120px;
  padding: 0;
  margin-top: 10px;
  border: none;
  color: rgb(66, 0, 219);
  font-size: 80%;
}

p {
  margin: 24px auto;
}

form .submitenabled:hover {
  background-color: var(--unfocused-color);
  color: white;
}

form .submitdisabled {
  color: white;
  border: 2px solid #6d6d6d;
  background-color: #6d6d6d;
}

.error {
  text-align: center;
  font-size: 80%;
  display: block;
  margin: 30px auto 0px auto;
  padding: 8px 4px;
  width: 100%;
  height: 20%;
  background-color: var(--error-background);
  color: var(--error-color);
  border-radius: 24px;
}

.displayNone {
  display: none;
}

@media screen and (min-width:800px){
  .flex-parent{
    flex-direction:row;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../../styles/login-signup-style.css">
  <title>registreren</title>
</head>

<body>
  <div class="container">
    <form action="../../php/signup_handler.php" method="post" id="form">
      <h1>Account registreren</h1>
      <a href="../login">Inloggen</a>

      <div class="flex-parent">
        <div class="flex-item">
          <input type="email" name="email" placeholder="Email" id="email" required>

          <input type="text" name="first_name" placeholder="Voornaam" id="first_name" required>
          <input type="text" name="tussenvoegsel" placeholder="Tussenvoegsels" id="tussenvoegsel" required>
          <input type="text" name="last_name" placeholder="Achternaam" id="last_name" required>
        </div>

        <div class="flex-item">
          <input type="text" name="student_nr" placeholder="Student nummer" id="student_nr" required>
          <input type="text" name="class" placeholder="Klas" id="class" required>

          <input type="password" name="password" placeholder="Wachtwoord" id="pwd" required>
          <input type="password" name="confirmPassword" placeholder="Herhaal Wachtwoord" id="pwd2" required>
        </div>
      </div>

      <input type="submit" value="Maak account" class="submitenabled" id="submit">
    </form>
  </div>
  <script src="../../javascript/signup.js"></script>
</body>

</html>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

I made some adjustment in your css (in .container and body). Also added a media query to achieve the look you've described. The break is at 600px, but it can be adjusted.

@font-face {
  font-family: 'eau';
  src: url('../fonts/eau.woff2') format('woff2'), url('../fonts/eau.woff') format('woff'), url('../fonts/eau.ttf') format('truetype');
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  --unfocused-color: rgb(238, 115, 38);
  --focused-color: #ee7326;
  --error-background: #ec6666;
  --error-color: white;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  background: #eaeaea;
  font-family: 'eau', sans-serif;
  position: relative;
  height: 100vh;
}

.container {
  width: 25%;
  width: 500px;
  padding: 3em;
  border-radius: 24px;
  position: absolute;
  top: 10px;
  left: calc(50% - 250px);
  background: white;
  text-align: center;
}

form h1 {
  text-transform: uppercase;
  font-weight: 500;
}

a {
  text-decoration: none;
  color: rgb(66, 0, 219);
  font-size: 80%;
}

.flex-parent {
  display: flex;
  flex-direction: row;
}

input[type='email'],
input[type='password'],
input[type='text'] {
  background: none;
  display: block;
  margin: 25px auto 0 auto;
  padding: 14px 10px;
  width: 70%;
  min-width: 100px;
  text-align: center;
  border: 2px solid var(--unfocused-color);
  border-radius: 24px;
  outline: none;
  color: black;
  transition: 0.25s;
}

input[type='email']:focus,
input[type='password']:focus,
input[type='text']:focus {
  width: 90%;
  border: 2px solid var(--focused-color);
}

input[type='submit'] {
  background: none;
  display: block;
  margin: 25px auto 0 auto;
  padding: 14px 10px;
  width: 50%;
  min-width: 100px;
  text-align: center;
  border: 2px solid var(--unfocused-color);
  border-radius: 24px;
  outline: none;
  color: black;
  transition: 0.25s;
}

input[class="password-reset-button"] {
  /* it breaks if i dont use [] */
  width: 60%;
  min-width: 120px;
  padding: 0;
  margin-top: 10px;
  border: none;
  color: rgb(66, 0, 219);
  font-size: 80%;
}

p {
  margin: 24px auto;
}

form .submitenabled:hover {
  background-color: var(--unfocused-color);
  color: white;
}

form .submitdisabled {
  color: white;
  border: 2px solid #6d6d6d;
  background-color: #6d6d6d;
}

.error {
  text-align: center;
  font-size: 80%;
  display: block;
  margin: 30px auto 0px auto;
  padding: 8px 4px;
  width: 100%;
  height: 20%;
  background-color: var(--error-background);
  color: var(--error-color);
  border-radius: 24px;
}

.displayNone {
  display: none;
}

@media only screen and (max-width: 600px) {
  .flex-parent {
    flex-direction: column;
  }
  .container {
    width: 350px;
    top: 10px;
    left: calc(50% - 175px);
  }
}
<body>
  <div class="container">
    <form action="../../php/signup_handler.php" method="post" id="form">
      <h1>Account registreren</h1>
      <a href="../login">Inloggen</a>

      <div class="flex-parent">
        <div class="flex-item">
          <input type="email" name="email" placeholder="Email" id="email" required>

          <input type="text" name="first_name" placeholder="Voornaam" id="first_name" required>
          <input type="text" name="tussenvoegsel" placeholder="Tussenvoegsels" id="tussenvoegsel" required>
          <input type="text" name="last_name" placeholder="Achternaam" id="last_name" required>
        </div>

        <div class="flex-item">
          <input type="text" name="student_nr" placeholder="Student nummer" id="student_nr" required>
          <input type="text" name="class" placeholder="Klas" id="class" required>

          <input type="password" name="password" placeholder="Wachtwoord" id="pwd" required>
          <input type="password" name="confirmPassword" placeholder="Herhaal Wachtwoord" id="pwd2" required>
        </div>
      </div>

      <input type="submit" value="Maak account" class="submitenabled" id="submit">
    </form>
  </div>
  <script src="../../javascript/signup.js"></script>
</body>
<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Page link：https//www.codepudding.com/Backend/195137.html

Prev:Why button function only works once
Next:Make cubes size smaller
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding