CSS Flexbox Form With Responsive Media Query Layout

I am trying to create an html form that will change to column layout when the screen width reaches x amount of pixels (with flexbox and media query). The problem I am incurring is that the submit button will not position itself under the different fields such as name, town you were born, email in full screen but will in the phone sized screen.

I have tried to put the form-button div both inside and out of the contact div. Only when I leave it in the contact div I cannot get the button to display below the message box in mobile format. Then when I take it out the contact div it works for mobile but not full screen.

The first two pictures I include below are what I would like both full screen and mobile to look like (please exclude the responsiveness of the other elements it’s a work in progress). The final two pictures are my current state.

Lastly I include both the HTML and CSS code for the form. I have also included the main CSS stylesheet incase there is something in there that may be affecting my form. The code for the button/button div may look bare, I have tried many different flexbox properties although none worked so I have removed them to avoid unnecessary clutter.

Full Screen Correct Small Screen Correct Full Screen Incorrect Small Screen Incorrect

    <!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="style.css" />
        <link rel="stylesheet" href="formStyle.css" />
        <title>Contact Us</title>
      </head>
      <body>
        <header>
          <img src="Images/logo.png" alt="logo" id="logo" />
          <!--Logo-->
          <nav>
            <ul class="nav_links">
              <li><a href="./index.html">Home</a></li>
              <li><a href="./merchandise.html">Merchandise</a></li>
              <li><a href="./about.html">About</a></li>
              <li><a href="./contactUs.html">Contact Us</a></li>
            </ul>
          </nav>
        </header>
        <h1>CONTACT US</h1>
        <br /><br />
        <h4>
          Have a quick question? Use contact form below and we'll be back to you as
          soon as possible!
        </h4>
        <br />
        <form action="#" class="contactForm">
          <div class="message">
            <label for="msg">Message</label>
            <textarea id="msg"></textarea>
          </div>
          <div class="contact">
            <label for="name">Name</label>
            <input type="text" id="name" />
    
            <label for="townborn">Town you were born in</label>
            <input type="text" id="townborn" />
    
            <label for="email">Email Address</label>
            <input type="email" id="email" />
          </div>
          <div class="form-button">
            <button type="submit">Submit</button>
          </div>
        </form>
      </body>
    </html>

  
  .contactForm {
      display: flex;
      background-color: beige;
      border-radius: 3px;
      padding: 1.8em;
    }
    .message {
      display: flex;
      flex-direction: column;
      order: 3;
    }
    .message > textarea {
      flex: 1;
      min-width: 18em;
    }
    .contact {
      flex: 1;
      order: 1;
      margin-right: 2em;
    }
    .contact input {
      width: 100%;
    }
    .contact input {
      padding: 1em;
      margin-bottom: 1em;
    }
    
    @media only screen and (max-device-width: 480px) {
      .contactForm {
        flex-direction: column;
      }
      .message {
        margin-right: 2em;
        order: 2;
      }

  .form-button {
    order: 3;
  }
}

    @import url("https://fonts.googleapis.com/css2?family=Montserrat:[email protected]&display=swap");
    
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    body {
      background-image: linear-gradient(to top, #ddf2eb, #d3cdd7);
      background-repeat: no-repeat;
      height: 100vh;
    }
    
    header {
      display: flex;
      padding: 10px 5%;
      background-color: #ddf2eb;
      align-items: center;
      align-self: stretch;
    }
    
    #logo {
      height: 70px;
      width: 70px;
      cursor: pointer;
    }
    
    .nav_links {
      list-style: none;
      margin-left: 10%;
      white-space: nowrap;
    }
    
    .nav_links li {
      display: inline-block;
      padding: 0px 20px;
    }
    
    .nav_links li a {
      transition: all 0.3s ease 0;
      font-family: "Montserrat", "sans-serif";
      font-weight: 500;
      font-size: 15px;
      color: #606d5d;
      text-decoration: none;
    }
    
    .nav_links li a:hover {
      color: honeydew;
    }
    
    .flex-container {
      display: flex;
    }

Answer

I’m not sure that possible with flex, because flex is either row or column, and you want both at the same time. you could try with grid instead!

Example with grid

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.contactForm label {
    display: block;
}

.contactForm input,
.contactForm textarea {
    height: 100%;
    width: 100%;
}

.contactForm > div {
    width: 100%;
}

.contact-name {
    grid-area: name;
}

.contact-townborn {
    grid-area: townborn;
}

.contact-email {
    grid-area: email;
}

.contact-msg {
    grid-area: msg;
    padding-bottom: 20px;
}

.contact-form-button {
    grid-area: button;
    margin-top: -20px;
    padding-top: 10px;
}

.contactForm {
    background-color: #2196F3;
    display: grid;
    grid-gap: 20px;
    grid-template-areas: 'name' 'townborn' 'email' 'msg' 'button';
    padding: 20px;
    max-width: 800px;
}

@media (min-width: 480px) {
    .contactForm {
        grid-template-areas: 'name msg' 'townborn msg' 'email msg' 'button msg';
    }
    .contact-form-button {
        margin-top: 0;
    }
} 
<form action="#" class="contactForm">
    <div class="contact-name">
        <label for="name">Name</label>
        <input type="text" id="name" />
    </div>
    <div class="contact-townborn">
        <label for="townborn">Town you were born in</label>
        <input type="text" id="townborn" />
    </div>
    <div class="contact-email">
        <label for="email">Email Address</label>
        <input type="email" id="email" />
    </div>
    <div class="contact-msg">
        <label for="msg">Message</label>
        <textarea id="msg"></textarea>
    </div>
    <div class="contact-form-button">
        <button type="submit">Submit</button>
    </div>
</form>

Source: W3schools CSS Grid Layout

Leave a Reply

Your email address will not be published. Required fields are marked *