Responsive form layout without media query

In this example below you will see how to do a Responsive form layout without media query with some HTML / CSS and Javascript

form layout with flexbox

Thumbnail
This awesome code was written by hlanderd, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright hlanderd ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Responsive form layout without media query</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="wrap">
  <form class="message" action="">
    <h3 class="message__title">Responsive inputs</h3>
    <input class="message__text" type="text" placeholder="input 1"></input>
    <input class="message__text" type="text" placeholder="input 2"></input>
    <input class="message__text" type="text" placeholder="input 3"></input>
    <input class="message__text" type="text" placeholder="input 4"></input>
    <textarea class="message__textarea" placeholder="textarea" rows="3"></textarea>
  </form>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/hlanderd/responsive-form-layout-without-media-query-wMqNwL */
.message {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.message__text {
  flex: 1 0 40%;
  width: 43%;
  float: left;
}

.message__textarea, .message__title {
  flex: 1 1 100%;
}

/* ----------- visual styles ------------- */
.wrap {
  max-width: 600px;
  margin: 0 auto;
}

.message {
  padding: 10px 10px 10px 0;
  background: linear-gradient(to bottom, #1fb7e2 0%, #1685cf 100%);
  border: 1px solid #51d1ed;
}

.message__title {
  color: #fff;
  padding: 0 10px;
  text-shadow: 0 -1px 2px rgba(0, 0, 0, 0.3);
}

.message__text, .message__textarea {
  margin-left: 10px;
  padding: 8px 10px;
  margin-bottom: 10px;
  background: linear-gradient(to bottom, #c2d8e2 0%, #fafcfd 50%);
  color: #fff;
  border: 1px solid #156f9b;
  border-radius: 3px;
}

Comments