Html - How do I set my flex correctly on this sign up page

El0dinRuh
July 17, 2024
225 views
0 votes
2 Answers

I am currently working on project #6 of the Odin Project and having some minor problems. I am trying to get my project as close to https://cdn.statically.io/gh/TheOdinProject/curriculum/5f37d43908ef92499e95a9b90fc3cc291a95014c/html_css/project-sign-up-form/sign-up-form.png that^ as possible within reason. So I am currently trying to set the right flex or flex-shorthand rules in CSS to move the input fields so that I get two columns of bars instead of one but don’t know how.

I tried different types of positioning, input:nth-child(even), and some other things that still didn’t work for some reason. Here is my codepen: https://codepen.io/El0din-Ruh/pen/gONayLX`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sign Up Form</title>
    <style>
         body {
            margin: 0;
            display: flex;
            align-items: center;

         }
         @font-face {
            font-family: Norse-Bold;
            src: url(Norse-Bold.otf);
         }
         html {
            font-family: Norse-Bold;
         }
         #Right-side {
            padding-left: 20px;
         }
         p {
            padding: 10px;
            font-size: 20px;
         }
         form {
            background-color:burlywood;
            display: flex;
            flex-direction: column;
            justify-content: center;
            position:static;

         }
         form div input {
            display: flex;
            flex-direction: row;
            justify-content: center;
            position:relative;
         }
         input:nth-of-type(2), input:nth-of-type(4), input:nth-of-type(6){
            color:aqua;
         }
        

    </style>
</head>
<body>
    <div id="image">
        <img src="Tree.jpg" height ="600px"
        width="300px">
    </div>
    <div id="Right-side">
        <p>
            Attention! This is not a real online service! But please, still sign up for its' makers benefit. 
            You can sign up right below: Right... Down... There.
        </p>

        <p>I for one very much think that you should sign up OR login</p>
    <form id="Inputs">
        <div id="FN">
            <label for="first_name">First Name:</label>
            <input type="text" name="first_name" id="first_name">
        </div>
        <div id="LN">
            <label for="last_name">Last Name:</label>
            <input type="text" name="last_name" id="last_name">
        </div>    
        <div id="EM">
            <label for="Email">Email:</label>
            <input type="email" name="Email" id="email">
        </div>
        <div id="PN">
            <label for="phone_number">Phone Number:</label>
            <input type="number" name="phone_number" id="phone_number">
        </div>
        <div id="PS">
            <label for="password">Password:</label>
            <input type="password" name="password" id="password">
        </div>    
        <div id="CFNPS">
            <label for="CPassword">Confirm Password:</label>
            <input type="password" name="CPassword" id="ConPassword">
        </div>
        <button type="submit">Create an Account</button>
    </form>
    <div id="Login">
        <p>Already have an Account? <a href="https://google.com">Log In</href></p>
    </div>
    </div>

</body>
</html>

Answers

Currently "flex-direction: column;" on your form is making all the divs in the form element stack vertically in a column. A quick fix could be to remove that so the divs are positioned horizontally, use flex-wrap to make them break onto a new line and then set the width of each div to 50% so that you get 2 divs to each row. The 50% width is set with the "flex-basis: calc(50% – 10px);" which is 50%, less the 5px of padding that is on each side of the div. Something like the below snippet.

Note, I added a container div to the content so that it stacks your form and image on small screens – otherwise you don’t have enough room and the form will break.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sign Up Form</title>
    <style>
        body {
            margin: 0;
        }

        .container {
            display: flex;
            flex-direction: column-reverse;
            align-items: center;
            max-width: 1280px;
            margin: auto;
        }

        @media (min-width: 768px) {
            .container {
                flex-direction: row;
            }
        }

        @font-face {
            font-family: Norse-Bold;
            src: url(Norse-Bold.otf);
        }

        html {
            font-family: Norse-Bold;
        }

        #Right-side {
            padding-left: 20px;
        }

        p {
            padding: 10px;
            font-size: 20px;
        }

        form {
            background-color: burlywood;
            display: flex;
            /* flex-direction: column; 
                justify-content: center;
                position:static; */
            flex-wrap: wrap;
        }

        form div {
            flex-basis: calc(50% - 10px);
            margin-bottom: 10px;
            padding: 5px;
        }

        form div input {
            display: flex;
            flex-direction: row;
            justify-content: center;
            position: relative;
        }

        input:nth-of-type(2),
        input:nth-of-type(4),
        input:nth-of-type(6) {
            color: aqua;
        }
    </style>
</head>

<body>
    <div class="container">
        <div id="image">
            <img src="Tree.jpg" height="600px" width="300px">
        </div>
        <div id="Right-side">
            <p>
                Attention! This is not a real online service! But please, still sign up for its' makers benefit.
                You can sign up right below: Right... Down... There.
            </p>

            <p>I for one very much think that you should sign up OR login</p>
            <form id="Inputs">
                <div id="FN">
                    <label for="first_name">First Name:</label>
                    <input type="text" name="first_name" id="first_name">
                </div>
                <div id="LN">
                    <label for="last_name">Last Name:</label>
                    <input type="text" name="last_name" id="last_name">
                </div>
                <div id="EM">
                    <label for="Email">Email:</label>
                    <input type="email" name="Email" id="email">
                </div>
                <div id="PN">
                    <label for="phone_number">Phone Number:</label>
                    <input type="number" name="phone_number" id="phone_number">
                </div>
                <div id="PS">
                    <label for="password">Password:</label>
                    <input type="password" name="password" id="password">
                </div>
                <div id="CFNPS">
                    <label for="CPassword">Confirm Password:</label>
                    <input type="password" name="CPassword" id="ConPassword">
                </div>
                <div>
                    <button type="submit">Create an Account</button>
                </div>
            </form>
            <div id="Login">
                <p>Already have an Account? <a href="https://google.com">Log In</href>
                </p>
            </div>
        </div>
    </div>

</body>

</html>

The HTML and CSS requires a little restructuring to create a two-column layout for your input fields, as below:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sign Up Form</title>
    <style>
        body {
            margin: 0;
            display: flex;
            align-items: center;

        }
        @font-face {
            font-family: Norse-Bold;
            src: url(Norse-Bold.otf);
        }
        html {
            font-family: Norse-Bold;
        }
        #Right-side {
            padding-left: 20px;
        }
        p {
            padding: 10px;
            font-size: 20px;
        }
        form {
            background-color: burlywood;
            display: flex;
            flex-direction: column;
            gap: 20px;
            padding: 20px;
        }
        .form-row {
            display: flex;
            justify-content: space-between;
            gap: 20px;
        }
        .form-row > div {
            flex: 1;
        }
        label {
            display: block;
            margin-bottom: 5px;
        }
        input {
            width: 100%;
            padding: 5px;
            box-sizing: border-box;
        }
        button {
            align-self: flex-start;
            margin-top: 20px;
            padding: 10px 20px;
        }
        input:nth-of-type(2), input:nth-of-type(4), input:nth-of-type(6){
            color:aqua;
        }
    </style>
</head>
<body>
    <div id="image">
        <img src="Tree.jpg" height ="600px"
             width="300px">
    </div>
    <div id="Right-side">
        <p>
            Attention! This is not a real online service! But please, still sign up for its' makers benefit.
            You can sign up right below: Right... Down... There.
        </p>
        <p>I for one very much think that you should sign up OR login</p>
        <form id="Inputs">
            <div class="form-row">
                <div id="FN">
                    <label for="first_name">First Name:</label>
                    <input type="text" name="first_name" id="first_name">
                </div>
                <div id="LN">
                    <label for="last_name">Last Name:</label>
                    <input type="text" name="last_name" id="last_name">
                </div>
            </div>
            <div class="form-row">
                <div id="EM">
                    <label for="Email">Email:</label>
                    <input type="email" name="Email" id="email">
                </div>
                <div id="PN">
                    <label for="phone_number">Phone Number:</label>
                    <input type="number" name="phone_number" id="phone_number">
                </div>
            </div>
            <div class="form-row">
                <div id="PS">
                    <label for="password">Password:</label>
                    <input type="password" name="password" id="password">
                </div>
                <div id="CFNPS">
                    <label for="CPassword">Confirm Password:</label>
                    <input type="password" name="CPassword" id="ConPassword">
                </div>
            </div>
            <button type="submit">Create an Account</button>
        </form>
        <div id="Login">
            <p>Already have an Account? <a href="https://google.com">Log In</href></p>
        </div>
    </div>
</body>
</html>

You have a few other issues with your code, however, this should address your immediate issue.

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How do I set my flex correctly on this sign up page

Answers