Question 42855 in Html Question posted in
Some basic documentation can be found here.

The content of my form is not entirely visible – Html

I’m a beginner in CSS and I attempted to create a form using Flexbox. However, I’m facing an issue where my content is not being fully displayed. Currently, the header form is not visible when the website is viewed on a tablet or desktop. The situation is even worse on mobile view as some of the input fields are not visible, despite being scrollable. Could you please assist me in identifying what is missing in my code?

HTML:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Us</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <section id="registration-page">
        <form class="signup-form">  
            <div class="form-header">
                <h1>Create Account</h1>
            </div>
          <div class="form-body">
            <div class="row">
              <div class="input-group">
                <label>First name </label>
                <input type="text" placeholder="Enter your first name">
              </div>
              <div class="input-group">
                <label>Last name</label>
                <input type="text" placeholder="Enter your last name">
              </div>
            </div>

            <div class="row">
              <div class="input-group">
                <label>Email </label>
                <input type="email" placeholder="Enter your email address">
              </div>
            </div>

            <div class="row">
              <div class="input-group">
                <label>Password </label>
                <input type="password" placeholder="Enter your your password">
              </div>
              <div class="input-group">
                <label>Confirm Password</label>
                <input type="password" placeholder="Enter your password again">
              </div>
            </div>

              
            <div class="row">
              <div class="input-group">
                <label for="">Gender</label>
            
                <div class="radio-group">
            
                  <div>
                    <label for="male">
                      <input type="radio" name="gender" id="male">
                      Male
                    </label>
                  </div>
            
                  <div>
                    <label for="female">
                      <input type="radio" name="gender" id="female">
                      Female
                    </label>
                  </div>
            
                  <div>
                    <label for="other">
                      <input type="radio" name="gender" id="other"> Other
                    </label>
                  </div>
            
                </div> <!-- .radio-group -->
              </div> <!-- .input-group -->
            

              <div class="input-group">
                <label for="">Hobbies</label>
                <div class="checkbox-group">
                  <div>
                    <label for="music">
                      <input type="checkbox" name="hobbies" id="music">
                      Music
                    </label>
                  </div>
             
                  <div>
                    <label for="cooking">
                      <input type="checkbox" name="cooking" id="cooking">
                      Cook
                    </label>
                  </div>
             
                  <div>
                    <label for="travel">
                      <input type="checkbox" name="travel" id="travel">
                      Travel
                    </label>
                  </div>
             
                  <div>
                    <label for="movies">
                      <input type="checkbox" name="movies" id="movies">
                      Movie
                    </label>
                  </div>
                </div>


                </div> <!-- .checkbox-group -->
              </div><!-- .input-group -->
              
              
              <div class="row"> 
                <div class="input-group">
                  <label for="">Source of Income</label>
                  <select>
                    <option>Employed</option>
                    <option>Self-Employed</option>
                    <option>Unemployed</option>
                  </select>
                </div>
                <div class="input-group">
                  <label>Income</label>
                  <div class="range-group">
                    <input type="range" min="0" max="100" value="10" oninput="rangeValue.innerText = this.value">
                    <label id="rangeValue">10</label>
                  </div>
                </div>
              </div>
              
              <div class="row">
                <div class="input-group">
                  <label>Upload Profile Picture</label>
                  <input type="file">
                </div>
                <div class="input-group">
                  <label>Age</label>
                  <input type="number">
                </div>
              </div>

              <div class="row">
                <div class="input-group">
                  <label for="">Bio</label>
                  <textarea> </textarea>
                </div>
              </div>

              <div class="form-footer">
                <button class="btn">Create</button>
              </div>

          </div>


        </form> 
    
</section>

</body>

CSS:

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;

}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

html {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    height: 100vh;
}

#registration-page {
    height: 100vh;
    background: #78a7ba; 
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: scroll;
}

.signup-form {
    flex: 1;
    max-width: 600px;
    background-color: #EFF0F1;
    border-radius: 10px;
    border: 1px solid #999;
}

.form-header {
    padding: 15px 0;
    border-bottom: 1px solid #cccccc;
}

.form-header h1 {
    font-size: 28px;
    text-align: center;
    color: #666;
}

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

.input-group {
    flex:1;  
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 10px 5px;
}

label {
    color: #1BBA93;
    font-size: 17px;
    font-weight: 500;
    padding-bottom: 5px;
}

input[type="text"],
input[type="email"], 
input[type="password"],
input[type="file"],
input[type="number"],
textarea,
select {
    font-size: 18px;
    height: 34px;
    padding: 0px 10px;
    color: #666;
    border: 1px solid #d6d6d6;
    border-radius: 4px;
    background: white;
    outline: none;
    }

    .form-body {
        background: white;
        padding: 5px 10px;
    }

    .radio-group,
    .checkbox-group,
    .range-group {
        display: flex;
    }

    .radio-group div, 
    .checkbox-group div,
    .range-group input {
        flex: 1 ;
    }

    .radio-group label, 
    .checkbox-group label{
        color:#666;
        cursor:pointer;
        
    }
    .range-group label {
        margin-left: 10px;
        background-color: #1BBA93;
        color: white;
        border-radius: 5px;
        padding: 5px;
        font-size: 17px;
        text-align: center;
      }

    textarea {
        resize: none;
        height: 100px;
    }

    .form-footer {
        display:flex;
        justify-content: flex-end;
    }

    .btn {
        padding:10px 20px;
        background-color: #1BBA93;
        font-size:17px;
        border:none;
        border-radius:5px;
        color:#bcf5e7;
        cursor:pointer;
    }

    @media only screen and (max-width: 500px) {
        .row{
          flex-direction:column; 
        }
    }


/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;

}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

html {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    height: 100vh;
}

#registration-page {
    height: 100vh;
    background: #78a7ba; 
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: scroll;
}

.signup-form {
    flex: 1;
    max-width: 600px;
    background-color: #EFF0F1;
    border-radius: 10px;
    border: 1px solid #999;
}

.form-header {
    padding: 15px 0;
    border-bottom: 1px solid #cccccc;
}

.form-header h1 {
    font-size: 28px;
    text-align: center;
    color: #666;
}

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

.input-group {
    flex:1;  
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 10px 5px;
}

label {
    color: #1BBA93;
    font-size: 17px;
    font-weight: 500;
    padding-bottom: 5px;
}

input[type="text"],
input[type="email"], 
input[type="password"],
input[type="file"],
input[type="number"],
textarea,
select {
    font-size: 18px;
    height: 34px;
    padding: 0px 10px;
    color: #666;
    border: 1px solid #d6d6d6;
    border-radius: 4px;
    background: white;
    outline: none;
    }

    .form-body {
        background: white;
        padding: 5px 10px;
    }

    .radio-group,
    .checkbox-group,
    .range-group {
        display: flex;
    }

    .radio-group div, 
    .checkbox-group div,
    .range-group input {
        flex: 1 ;
    }

    .radio-group label, 
    .checkbox-group label{
        color:#666;
        cursor:pointer;
        
    }
    .range-group label {
        margin-left: 10px;
        background-color: #1BBA93;
        color: white;
        border-radius: 5px;
        padding: 5px;
        font-size: 17px;
        text-align: center;
      }

    textarea {
        resize: none;
        height: 100px;
    }

    .form-footer {
        display:flex;
        justify-content: flex-end;
    }

    .btn {
        padding:10px 20px;
        background-color: #1BBA93;
        font-size:17px;
        border:none;
        border-radius:5px;
        color:#bcf5e7;
        cursor:pointer;
    }

    @media only screen and (max-width: 500px) {
        .row{
          flex-direction:column; 
        }
    }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Us</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <section id="registration-page">
        <form class="signup-form">  
            <div class="form-header">
                <h1>Create Account</h1>
            </div>
          <div class="form-body">
            <div class="row">
              <div class="input-group">
                <label>First name </label>
                <input type="text" placeholder="Enter your first name">
              </div>
              <div class="input-group">
                <label>Last name</label>
                <input type="text" placeholder="Enter your last name">
              </div>
            </div>

            <div class="row">
              <div class="input-group">
                <label>Email </label>
                <input type="email" placeholder="Enter your email address">
              </div>
            </div>

            <div class="row">
              <div class="input-group">
                <label>Password </label>
                <input type="password" placeholder="Enter your your password">
              </div>
              <div class="input-group">
                <label>Confirm Password</label>
                <input type="password" placeholder="Enter your password again">
              </div>
            </div>

              
            <div class="row">
              <div class="input-group">
                <label for="">Gender</label>
            
                <div class="radio-group">
            
                  <div>
                    <label for="male">
                      <input type="radio" name="gender" id="male">
                      Male
                    </label>
                  </div>
            
                  <div>
                    <label for="female">
                      <input type="radio" name="gender" id="female">
                      Female
                    </label>
                  </div>
            
                  <div>
                    <label for="other">
                      <input type="radio" name="gender" id="other"> Other
                    </label>
                  </div>
            
                </div> <!-- .radio-group -->
              </div> <!-- .input-group -->
            

              <div class="input-group">
                <label for="">Hobbies</label>
                <div class="checkbox-group">
                  <div>
                    <label for="music">
                      <input type="checkbox" name="hobbies" id="music">
                      Music
                    </label>
                  </div>
             
                  <div>
                    <label for="cooking">
                      <input type="checkbox" name="cooking" id="cooking">
                      Cook
                    </label>
                  </div>
             
                  <div>
                    <label for="travel">
                      <input type="checkbox" name="travel" id="travel">
                      Travel
                    </label>
                  </div>
             
                  <div>
                    <label for="movies">
                      <input type="checkbox" name="movies" id="movies">
                      Movie
                    </label>
                  </div>
                </div>


                </div> <!-- .checkbox-group -->
              </div><!-- .input-group -->
              
              
              <div class="row"> 
                <div class="input-group">
                  <label for="">Source of Income</label>
                  <select>
                    <option>Employed</option>
                    <option>Self-Employed</option>
                    <option>Unemployed</option>
                  </select>
                </div>
                <div class="input-group">
                  <label>Income</label>
                  <div class="range-group">
                    <input type="range" min="0" max="100" value="10" oninput="rangeValue.innerText = this.value">
                    <label id="rangeValue">10</label>
                  </div>
                </div>
              </div>
              
              <div class="row">
                <div class="input-group">
                  <label>Upload Profile Picture</label>
                  <input type="file">
                </div>
                <div class="input-group">
                  <label>Age</label>
                  <input type="number">
                </div>
              </div>

              <div class="row">
                <div class="input-group">
                  <label for="">Bio</label>
                  <textarea> </textarea>
                </div>
              </div>

              <div class="form-footer">
                <button class="btn">Create</button>
              </div>

          </div>


        </form> 
    
</section>

</body>
</html>

My goal is to ensure that the complete form is displayed correctly, regardless of the device used, whether it is a desktop, tablet, or mobile.

Tags:

3

Answers


  1. 0

    You have restricted the page to be only 100vh:

    #registration-page {
    height: 100vh;
}
html {
    height: 100vh;
}

    Remove these properties and it should work fine (alternatively set the height to auto in your 500px media query):

    /* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}


/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

html {
  -webkit-box-sizing: border-box;
  /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;
  /* Firefox, other Gecko */
  box-sizing: border-box;
  /* Opera/IE 8+ */
  font-family: 'Roboto', sans-serif;
  font-weight: bold;
  height: 100vh;
}

#registration-page {
  background: #78a7ba;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: scroll;
  height: 100vh;
}

.signup-form {
  flex: 1;
  max-width: 600px;
  background-color: #EFF0F1;
  border-radius: 10px;
  border: 1px solid #999;
}

.form-header {
  padding: 15px 0;
  border-bottom: 1px solid #cccccc;
}

.form-header h1 {
  font-size: 28px;
  text-align: center;
  color: #666;
}

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

.input-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 10px 5px;
}

label {
  color: #1BBA93;
  font-size: 17px;
  font-weight: 500;
  padding-bottom: 5px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="file"],
input[type="number"],
textarea,
select {
  font-size: 18px;
  height: 34px;
  padding: 0px 10px;
  color: #666;
  border: 1px solid #d6d6d6;
  border-radius: 4px;
  background: white;
  outline: none;
}

.form-body {
  background: white;
  padding: 5px 10px;
}

.radio-group,
.checkbox-group,
.range-group {
  display: flex;
}

.radio-group div,
.checkbox-group div,
.range-group input {
  flex: 1;
}

.radio-group label,
.checkbox-group label {
  color: #666;
  cursor: pointer;
}

.range-group label {
  margin-left: 10px;
  background-color: #1BBA93;
  color: white;
  border-radius: 5px;
  padding: 5px;
  font-size: 17px;
  text-align: center;
}

textarea {
  resize: none;
  height: 100px;
}

.form-footer {
  display: flex;
  justify-content: flex-end;
}

.btn {
  padding: 10px 20px;
  background-color: #1BBA93;
  font-size: 17px;
  border: none;
  border-radius: 5px;
  color: #bcf5e7;
  cursor: pointer;
}

@media only screen and (max-width: 500px) {
  .row {
    flex-direction: column;
  }
  html,
  #registration-page {
    height: auto;
  }
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contact Us</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <section id="registration-page">
    <form class="signup-form">
      <div class="form-header">
        <h1>Create Account</h1>
      </div>
      <div class="form-body">
        <div class="row">
          <div class="input-group">
            <label>First name </label>
            <input type="text" placeholder="Enter your first name">
          </div>
          <div class="input-group">
            <label>Last name</label>
            <input type="text" placeholder="Enter your last name">
          </div>
        </div>

        <div class="row">
          <div class="input-group">
            <label>Email </label>
            <input type="email" placeholder="Enter your email address">
          </div>
        </div>

        <div class="row">
          <div class="input-group">
            <label>Password </label>
            <input type="password" placeholder="Enter your your password">
          </div>
          <div class="input-group">
            <label>Confirm Password</label>
            <input type="password" placeholder="Enter your password again">
          </div>
        </div>


        <div class="row">
          <div class="input-group">
            <label for="">Gender</label>

            <div class="radio-group">

              <div>
                <label for="male">
                      <input type="radio" name="gender" id="male">
                      Male
                    </label>
              </div>

              <div>
                <label for="female">
                      <input type="radio" name="gender" id="female">
                      Female
                    </label>
              </div>

              <div>
                <label for="other">
                      <input type="radio" name="gender" id="other"> Other
                    </label>
              </div>

            </div>
            <!-- .radio-group -->
          </div>
          <!-- .input-group -->


          <div class="input-group">
            <label for="">Hobbies</label>
            <div class="checkbox-group">
              <div>
                <label for="music">
                      <input type="checkbox" name="hobbies" id="music">
                      Music
                    </label>
              </div>

              <div>
                <label for="cooking">
                      <input type="checkbox" name="cooking" id="cooking">
                      Cook
                    </label>
              </div>

              <div>
                <label for="travel">
                      <input type="checkbox" name="travel" id="travel">
                      Travel
                    </label>
              </div>

              <div>
                <label for="movies">
                      <input type="checkbox" name="movies" id="movies">
                      Movie
                    </label>
              </div>
            </div>


          </div>
          <!-- .checkbox-group -->
        </div>
        <!-- .input-group -->


        <div class="row">
          <div class="input-group">
            <label for="">Source of Income</label>
            <select>
              <option>Employed</option>
              <option>Self-Employed</option>
              <option>Unemployed</option>
            </select>
          </div>
          <div class="input-group">
            <label>Income</label>
            <div class="range-group">
              <input type="range" min="0" max="100" value="10" oninput="rangeValue.innerText = this.value">
              <label id="rangeValue">10</label>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="input-group">
            <label>Upload Profile Picture</label>
            <input type="file">
          </div>
          <div class="input-group">
            <label>Age</label>
            <input type="number">
          </div>
        </div>

        <div class="row">
          <div class="input-group">
            <label for="">Bio</label>
            <textarea> </textarea>
          </div>
        </div>

        <div class="form-footer">
          <button class="btn">Create</button>
        </div>

      </div>


    </form>

  </section>

</body>

</html>
    Login or Signup to reply.
  2. 0

    I fixed mutliple problems that I will walk you through:

    • First, you a fixed width for the signup form to 600px. This wouldn’t work for mobile devices, so you should use min expression for satisfy mobile devices. For your problem, I used min(600px, 100%) since in mobile devices, 100% of the screen is less than 600 px, other content would overflow. (You could also make better conditions for both small and big devices, but if you are satisfied with max 600 px in big devices, that’s ok.)
    • For the header problem, you just remove the 100vh condition in registration-page.
    • You better add some margin for your sign-up form, so it doesn’t its edges are separated from those of the screen in smaller devices.
    • Finally, I set "overflow: hidden" in the signup form so that the bottom circular border radius appears as it’s overflowed by the children. This will be good as long as the height of signup for is the default which is auto, but if you fixed it’s height,you could put padding bottom instead or put bottom margin for the last child in the signup-form.

    Feel free to ask in the comments if something is unclear!

    html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;

}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

html {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    min-height: 100vh;
}

#registration-page {
    background: #78a7ba; 
    display: flex;
    justify-content: center;
    align-items: center;
}

.signup-form {
    flex: 1;
    /* max-width: 600px; */
    background-color: #EFF0F1;
    border: 1px solid #999;
    border-radius: 10px;
    /* The overflow condition to make bottom 
    borders appear circular, as the borders of 
    last children of signup-form
    are overflowing the edges making it appear sharp*/
    overflow: hidden;
    max-width: min(100%, 600px);
    width: 50vw;
    margin: 8px;
}

.form-header {
    padding: 15px 0;
    border-bottom: 1px solid #cccccc;
}

.form-header h1 {
    font-size: 28px;
    text-align: center;
    color: #666;
}

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

.input-group {
    flex:1;  
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 10px 5px;
}

label {
    color: #1BBA93;
    font-size: 17px;
    font-weight: 500;
    padding-bottom: 5px;
}

input[type="text"],
input[type="email"], 
input[type="password"],
input[type="file"],
input[type="number"],
textarea,
select {
    font-size: 18px;
    height: 34px;
    padding: 0px 10px;
    color: #666;
    border: 1px solid #d6d6d6;
    border-radius: 4px;
    background: white;
    outline: none;
    }

    .form-body {
        background: white;
        padding: 5px 10px;
    }

    .radio-group,
    .checkbox-group,
    .range-group {
        display: flex;
    }

    .radio-group div, 
    .checkbox-group div,
    .range-group input {
        flex: 1 ;
    }

    .radio-group label, 
    .checkbox-group label{
        color:#666;
        cursor:pointer;
        
    }
    .range-group label {
        margin-left: 10px;
        background-color: #1BBA93;
        color: white;
        border-radius: 5px;
        padding: 5px;
        font-size: 17px;
        text-align: center;
      }

    textarea {
        resize: none;
        height: 100px;
    }

    .form-footer {
        display:flex;
        justify-content: flex-end;
    }

    .btn {
        padding:10px 20px;
        background-color: #1BBA93;
        font-size:17px;
        border:none;
        border-radius:5px;
        color:#bcf5e7;
        cursor:pointer;
    }

    @media only screen and (max-width: 500px) {
        .row{
          flex-direction:column; 
        }
        

    }
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Us</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <section id="registration-page">
        <form class="signup-form">  
            <div class="form-header">
                <h1>Create Account</h1>
            </div>
          <div class="form-body">
            <div class="row">
              <div class="input-group">
                <label>First name </label>
                <input type="text" placeholder="Enter your first name">
              </div>
              <div class="input-group">
                <label>Last name</label>
                <input type="text" placeholder="Enter your last name">
              </div>
            </div>

            <div class="row">
              <div class="input-group">
                <label>Email </label>
                <input type="email" placeholder="Enter your email address">
              </div>
            </div>

            <div class="row">
              <div class="input-group">
                <label>Password </label>
                <input type="password" placeholder="Enter your your password">
              </div>
              <div class="input-group">
                <label>Confirm Password</label>
                <input type="password" placeholder="Enter your password again">
              </div>
            </div>

              
            <div class="row">
              <div class="input-group">
                <label for="">Gender</label>
            
                <div class="radio-group">
            
                  <div>
                    <label for="male">
                      <input type="radio" name="gender" id="male">
                      Male
                    </label>
                  </div>
            
                  <div>
                    <label for="female">
                      <input type="radio" name="gender" id="female">
                      Female
                    </label>
                  </div>
            
                  <div>
                    <label for="other">
                      <input type="radio" name="gender" id="other"> Other
                    </label>
                  </div>
            
                </div> <!-- .radio-group -->
              </div> <!-- .input-group -->
            

              <div class="input-group">
                <label for="">Hobbies</label>
                <div class="checkbox-group">
                  <div>
                    <label for="music">
                      <input type="checkbox" name="hobbies" id="music">
                      Music
                    </label>
                  </div>
             
                  <div>
                    <label for="cooking">
                      <input type="checkbox" name="cooking" id="cooking">
                      Cook
                    </label>
                  </div>
             
                  <div>
                    <label for="travel">
                      <input type="checkbox" name="travel" id="travel">
                      Travel
                    </label>
                  </div>
             
                  <div>
                    <label for="movies">
                      <input type="checkbox" name="movies" id="movies">
                      Movie
                    </label>
                  </div>
                </div>


                </div> <!-- .checkbox-group -->
              </div><!-- .input-group -->
              
              
              <div class="row"> 
                <div class="input-group">
                  <label for="">Source of Income</label>
                  <select>
                    <option>Employed</option>
                    <option>Self-Employed</option>
                    <option>Unemployed</option>
                  </select>
                </div>
                <div class="input-group">
                  <label>Income</label>
                  <div class="range-group">
                    <input type="range" min="0" max="100" value="10" oninput="rangeValue.innerText = this.value">
                    <label id="rangeValue">10</label>
                  </div>
                </div>
              </div>
              
              <div class="row">
                <div class="input-group">
                  <label>Upload Profile Picture</label>
                  <input type="file">
                </div>
                <div class="input-group">
                  <label>Age</label>
                  <input type="number">
                </div>
              </div>

              <div class="row">
                <div class="input-group">
                  <label for="">Bio</label>
                  <textarea> </textarea>
                </div>
              </div>

              <div class="form-footer">
                <button class="btn">Create</button>
              </div>

          </div>


        </form> 
    
</section>

</body>
    Login or Signup to reply.
  3. 0

    EDIT: I added below codes to media query 500px section and now works at all screen sizes. Additionally I added some divs (form-header-bottom and blank-bottom) to html file. And gave the signup-form class max-height:100vh;

           @media only screen and (max-width: 500px) {
      .row{
        flex-direction:column; 
      }
        #registration-page {
          height: 100vh;
          background: #78a7ba;
          display: block;
          justify-content: center;
          align-items: center;
          position:relative;
          padding-right: 25px;
          padding-left:25px;
          
      }
      #blank-bottom {
        height: 59px;
        background: #78a7ba; 
        display: flex;
        position:relative;
        justify-content: center;
        align-items: center; 
    }

}

@media screen and (max-width: 900px) and (min-width: 501px){

    .row{
        flex-direction:column; 
      }
        #registration-page {
          height: 100vh;
          background: #78a7ba;
          display: flex;
          justify-content: center;
          align-items: center;
          position:relative;
          padding-right: 25px;
          padding-left:25px;
        
          
      }
      #blank-bottom {
        height: 59px;
        background: #78a7ba; 
        display: flex;
        position:relative;
        justify-content: center;
        align-items: center; 
    }

}

    CSS & HTML Codes:

    /* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
    background-color: #78a7ba;

}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

html {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    height:100vh;
}


#registration-page {
    height: 100%;
    background: #78a7ba; 
    display: flex;
    position:relative;
    justify-content: center;
    align-items: center;
    padding-top:50px;
}

.form-header-bottom {
    height: 59px;
    background: #EFF0F1; 
    display: flex;
    position:relative;
    justify-content: center;
    align-items: center;
    border-bottom-left-radius:10px;
    border-bottom-right-radius: 10px;

}

#blank-bottom {
        height: 59px;
        background: #78a7ba; 
        display: flex;
        position:relative;
        justify-content: center;
        align-items: center; 
    }


.signup-form {
    flex: 1;
    max-width: 600px;
    max-height:100vh;
    background-color: #EFF0F1;
    border-radius: 10px;

}

.form-header {
    padding: 15px 0;
    border-bottom: 1px solid #cccccc;
}



.form-header h1 {
    font-size: 28px;
    text-align: center;
    color: #666;
}

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

.input-group {
    flex:1;  
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 10px 5px;
}

label {
    color: #1BBA93;
    font-size: 17px;
    font-weight: 500;
    padding-bottom: 5px;
}

input[type="text"],
input[type="email"], 
input[type="password"],
input[type="file"],
input[type="number"],
textarea,
select {
    font-size: 18px;
    height: 34px;
    padding: 0px 10px;
    color: #666;
    border: 1px solid #d6d6d6;
    border-radius: 4px;
    background: white;
    outline: none;
    }

    .form-body {
        background: white;
        padding: 5px 10px;
    }

    .radio-group,
    .checkbox-group,
    .range-group {
        display: flex;
    }

    .radio-group div, 
    .checkbox-group div,
    .range-group input {
        flex: 1 ;
    }

    .radio-group label, 
    .checkbox-group label{
        color:#666;
        cursor:pointer;
        
    }
    .range-group label {
        margin-left: 10px;
        background-color: #1BBA93;
        color: white;
        border-radius: 5px;
        padding: 5px;
        font-size: 17px;
        text-align: center;
      }

    textarea {
        resize: none;
        height: 100px;
    }

    .form-footer {
        display:flex;
        justify-content: flex-end;
    }

    .btn {
        padding:10px 20px;
        background-color: #1BBA93;
        font-size:17px;
        border:none;
        border-radius:5px;
        color:#bcf5e7;
        cursor:pointer;
    }

    @media only screen and (max-width: 500px) {
      .row{
        flex-direction:column; 
      }
        #registration-page {
          height: 100vh;
          background: #78a7ba;
          display: block;
          justify-content: center;
          align-items: center;
          position:relative;
          padding-right: 25px;
          padding-left:25px;
          
      }
      #blank-bottom {
        height: 59px;
        background: #78a7ba; 
        display: flex;
        position:relative;
        justify-content: center;
        align-items: center; 
    }

}

@media screen and (max-width: 900px) and (min-width: 501px){

    .row{
        flex-direction:column; 
      }
        #registration-page {
          height: 100vh;
          background: #78a7ba;
          display: flex;
          justify-content: center;
          align-items: center;
          position:relative;
          padding-right: 25px;
          padding-left:25px;
        
          
      }
      #blank-bottom {
        height: 59px;
        background: #78a7ba; 
        display: flex;
        position:relative;
        justify-content: center;
        align-items: center; 
    }

}
    <!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">
  <title>Document</title>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Us</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./style.css">
</head>
<body>
  
    <section id="registration-page">
        <form class="signup-form">  
            <div class="form-header">
                <h1>Create Account</h1>
            </div>
          <div class="form-body">
            <div class="row">
              <div class="input-group">
                <label>First name </label>
                <input type="text" placeholder="Enter your first name">
              </div>
              <div class="input-group">
                <label>Last name</label>
                <input type="text" placeholder="Enter your last name">
              </div>
            </div>

            <div class="row">
              <div class="input-group">
                <label>Email </label>
                <input type="email" placeholder="Enter your email address">
              </div>
            </div>

            <div class="row">
              <div class="input-group">
                <label>Password </label>
                <input type="password" placeholder="Enter your your password">
              </div>
              <div class="input-group">
                <label>Confirm Password</label>
                <input type="password" placeholder="Enter your password again">
              </div>
            </div>

              
            <div class="row">
              <div class="input-group">
                <label for="">Gender</label>
            
                <div class="radio-group">
            
                  <div>
                    <label for="male">
                      <input type="radio" name="gender" id="male">
                      Male
                    </label>
                  </div>
            
                  <div>
                    <label for="female">
                      <input type="radio" name="gender" id="female">
                      Female
                    </label>
                  </div>
            
                  <div>
                    <label for="other">
                      <input type="radio" name="gender" id="other"> Other
                    </label>
                  </div>
            
                </div> <!-- .radio-group -->
              </div> <!-- .input-group -->
            

              <div class="input-group">
                <label for="">Hobbies</label>
                <div class="checkbox-group">
                  <div>
                    <label for="music">
                      <input type="checkbox" name="hobbies" id="music">
                      Music
                    </label>
                  </div>
             
                  <div>
                    <label for="cooking">
                      <input type="checkbox" name="cooking" id="cooking">
                      Cook
                    </label>
                  </div>
             
                  <div>
                    <label for="travel">
                      <input type="checkbox" name="travel" id="travel">
                      Travel
                    </label>
                  </div>
             
                  <div>
                    <label for="movies">
                      <input type="checkbox" name="movies" id="movies">
                      Movie
                    </label>
                  </div>
                </div>


                </div> <!-- .checkbox-group -->
              </div><!-- .input-group -->
              
              
              <div class="row"> 
                <div class="input-group">
                  <label for="">Source of Income</label>
                  <select>
                    <option>Employed</option>
                    <option>Self-Employed</option>
                    <option>Unemployed</option>
                  </select>
                </div>
                <div class="input-group">
                  <label>Income</label>
                  <div class="range-group">
                    <input type="range" min="0" max="100" value="10" oninput="rangeValue.innerText = this.value">
                    <label id="rangeValue">10</label>
                  </div>
                </div>
              </div>
              
              <div class="row">
                <div class="input-group">
                  <label>Upload Profile Picture</label>
                  <input type="file">
                </div>
                <div class="input-group">
                  <label>Age</label>
                  <input type="number">
                </div>
              </div>

              <div class="row">
                <div class="input-group">
                  <label for="">Bio</label>
                  <textarea> </textarea>
                </div>
              </div>

              <div class="form-footer">
                <button class="btn">Create</button>
              </div>

          </div>

          <div class="form-header-bottom">
        </div>
        <div id="blank-bottom"></div>
        </form> 
      
</section>
</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search