0

I'm having issues with my scaling. I am new to coding and and don't want to have my question or help needed to be something vague do to a vague question of me not knowing how to ask the question so I put a code pin.

In my the Name label will be pulled to the top of my page before my elements when scaling for a full desktop screen.

when i put the page by half it looks fine but something is wrong with how i scaled my css width or something, anyone have a solution and advice to avoid this in the Future?

https://codepen.io/Aspiring/pen/gOWOgvz


    
    
    
    
        
        
        Checking Practice
        
    
    
    
        * {
            box-sizing: border-box;
        }
    
        nav {
            margin: 0px;
            padding: 0px;
            background: cadetblue;
        }
    
        nav li {
            list-style: none;
            float: left;
        }
    
        nav li a {
            display: block;
            text-decoration: none;
            list-style: none;
            margin: 0px;
            padding: 0px 100px;
        }
    
        input {
            position: relative;
            left: 30px;
        }
    
        #Pass {
            position: relative;
            left: 7px;
        }
    
        .sub-btn {
            position: relative;
            left: 135px;
            top: 10px
        }
    
        aside {
            float: right;
            color: blue;
            text-align: right;
            border: 2px solid blue;
            padding-right: px;
            width: 25%;
            margin-top: 5%;
        }
    
        article {
            width: 35%;
            float: right;
            padding: 5px;
        }
    
        #contact form {
            display: block;
            position: static;
            padding: 20px;
        }
    
<body>
    <header id="introducton">
        <h1>introduction</h1>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Qui accusantium delectus quo laborum quis iure
            dignissimos fugit quidem, rem molestiae! Provident, quidem tempora?</p>
    </header>
    <nav>
        <h2>nav</h2>
        <ul>
            <li><a href="index.html">ABOUT</a></li>
            <li><a href="index.html">HOME</a></li>
            <li><a href="index.html">CONTACT</a></li>
        </ul>
    </nav>
    <div class="asidebar">
        <aside>
            <h3>aside</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Non mollitia sequi odit animi enim praesentium.
            </p>
        </aside>
    </div>
    <section>
        <article>
            <h4>ARTICAL 1</h4>
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis repellat nemo id vero laudantium
                ad
                recusandae, hic unde eius repudiandae quo quasi distinctio ex? Rem incidunt facere ducimus aspernatur
                expedita!
            </p>
        </article>
        <article>
            <h5>ARTICAL 2</h5>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolor quae ipsum maiores? Excepturi ipsa
                voluptate
                eum modi? Explicabo saepe assumenda error in iusto minus nihil natus architecto, voluptatibus quia earum
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Non aspernatur illo quia! Dolores fuga illum
                officiis veritatis quaerat quo harum similique nobis voluptatibus recusandae commodi, vero at eveniet
                laborum ut iure, dicta dignissimos?</p>
        </article>
    </section>
    <div id="contact">
        <form action="/action_page.php" method="POST">
            <label for="name">Name:</label>
            <input type="name" id="name">
            <br>
            <label for="eMail">Email:</label>
            <input type="email" id="eMail">
            <br>
            <label for="Pass">Password:</label>
            <input type="password" id="Pass">
            <br>
            <label for="submit"></label>
            <input class="sub-btn" type="submit" id="email">

        </form>
    </div>

    <table>
        <tr>
            <th class="underline"> Contact</th>
            <th class="underline"> @gmail</th>
            <th class="underline"> Number</th>
        </tr>
        <tr>
            <td>Will Mosser</td>
            <td>will.mosser.32</td>
            <td>434-332-2222</td>
        </tr>
        <tr>
            <td>Page Mosser</td>
            <td>ppispage</td>
            <td>434-332-4343</td>
        </tr>
    </table>

    <footer>
        <h6>footer</h6>
        <p>2021&copy;Copyright</p>
    </footer>

</body>


</html>

2 Answers 2

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

    nav {
        margin: 0px;
        padding: 0px;
        background: cadetblue;
    }

    nav li {
        list-style: none;
        float: left;
    }

    nav li a {
        display: block;
        text-decoration: none;
        list-style: none;
        margin: 0px;
        padding: 0px 100px;
    }

    input {
        position: relative;
        left: 30px;
    }

    #Pass {
        position: relative;
        left: 7px;
    }

    .sub-btn {
        position: relative;
        left: 135px;
        top: 10px
    }

    aside {
        float: right;
        color: blue;
        text-align: right;
        border: 2px solid blue;
        padding-right: px;
        width: 25%;
        margin-top: 5%;
    }

    article {
        width: 35%;
        float: right;
        padding: 5px;
    }

    #contact form {
        display: block;
        position: static;
        padding: 20px;
    }
    #contact {
        display: inline-flex;
    }

I insert

#contact {
        display: inline-flex;
    }
4
  • I have not got to understanding flex yet, Thank you for this help so much!!!!!
    – AspiringLu
    Jun 28, 2021 at 17:23
  • I can explain about flex. Now Flex is very important for you. Jun 28, 2021 at 17:37
  • just my opinion. Jun 28, 2021 at 17:38
  • How can we meet? Jun 28, 2021 at 17:39
0
#contact {
   display: inline-block;
}
2
  • 3
    Please add some explanation why this can also work. Jun 28, 2021 at 21:00
  • While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value. Jun 30, 2021 at 8:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.