Html - how do i make the form be center

BenBarker
August 29, 2023
286 views
0 votes
2 Answers

im trying to make the box my form is in to be in the box for tablet screens and larger but I just cant figure out how please help I’ve tried everything I can think of and I have to submit it before I can sleep. i am completely new to coding so any help is great.

This is my code please help I know its a mess

/*Google Fonts*/
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Pacifico&display=swap');

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

/*General Styles*/
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /*Generic project styles*/
    color: #3a3a3a;
    font-family: "lato", sans-serif;
}

h1 {
    font-family: "pacifico", sans-serif;
    color: #252525;
}

.white-background {
    background-color: #ffffff;
}

.black-background {
    background-color: #252525;
}

.white-text {
    color: #ffffff;
}

.black-text {
    color: #252525;
}

.hidden {
    display: none;
}

/*header*/
header {
    background-color: #ffffff;
    padding: 0 1rem;
    position: fixed;
    z-index: 10;
    width: 100%;
    box-shadow: 0 2px 2px #3a3a3a;
    display: flex;
    justify-content: space-between;
    white-space: nowrap;
}

header a {
    text-decoration: none;
    color: inherit;
}

h1 {
    font-family: "pacifico", sans-serif;
    color: #252525;
}

#menu {
    font-size: 110%;
    list-style-type: none;
}

#menu li {
    margin-bottom: 1em;
}

.active {
    border-bottom: 1px solid #3a3a3a;
}

/*Navbar styles with dropdown toggle*/
nav {
    position: absolute;
    background-color: #ffffff;
    width: 100%;
    box-shadow: 0 2px 2px #3a3a3a;
    padding: 0 1rem;
    left: 0;
    display: none;
    justify-content: space-between;
    align-items: baseline;
    top: 100%;
}

/*nav toggle*/
#nav-toggle:checked~nav {
    display: block;
}

#nav-toggle {
    display: none;
}

#nav-toggle-label {
    font-size: 2rem;
}

/*Main*/
main {
    margin-top: 55px;
    flex: 1 0 auto;
}

/*Hero*/
#hero {
    height: 600px;
    width: 100%;
    background: url("../assets/images/pexels-anastasia-shuraeva-8466017 (1).jpg") no-repeat center center/cover;
    position: relative;
}

#hero h2 {
    font-family: "pacifico", sans-serif;
}

#hero h2,
#hero h3 {
    color: #ffffff;
}

#cover-text {
    background-color: rgba(0, 0, 0, .7);
    font-size: 130%;
    position: absolute;
    bottom: 30px;
    width: 89%;
    min-height: 200px;
    padding-top: 40px;
    padding-left: 10px;
}

/*About us*/
#about {
    height: 600px;
    width: 100%;
    color: #ffffff;
    padding-top: 2rem;
}

#about-us {
    text-align: center;
}

#about-us h1 {
    font-size: 170%;
    font-family: inherit;
}

#about-us {
    font-size: 130%;
}

#what-we-offer {
    padding-top: 2rem;
    text-align: center;
}

#offer-list li {
    padding: 20px;
    text-align: center;
}

/*Club times*/
#club-times h1 {
    color: #ffffff;
    padding-top: 1rem;
    text-align: center;
    font-family: inherit;
    text-align: center;
}

#club-times {
    display: flex;
    flex-wrap: wrap;
    /* Allow wrapping to multiple rows */
    justify-content: center;
    /* Center content horizontally */
    align-items: stretch;
    /* Stretch items to fill the container vertically */
    padding: 2rem 0;
    text-align: center;
    background-color: #252525;
    color: #ffffff;
}

#club-times div {
    padding: 1rem;
    text-align: center;
    flex-basis: 200px;
    flex-grow: 1;
}

/*Gallery*/
#photos img {
    width: 100%;
    line-height: 1em;
}

#photos {
    line-height: 0;
}

/*Sign up*/

#signup{
    background-color: #ffffff;
}

#signup-form {
    color: #ffffff;
    background-color:#252525;
    padding: 30px;
}

#signup-form>h2 {
    color: #fafafa;
    margin-bottom: 20px;
}

.form-input {
    background: transparent;
    color: #fafafa;
    width: 100%;
    height: 25px;
    margin: 5px 0 20px 0;
    border: 1px solid #fafafa;
    border-radius: 2px;
    padding: 0 5px;
}

.radio-buttons {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.join-button {
    margin-top: 20px;
    border-radius: 2px;
    padding: 15px 32px;
    font-size: 100%;
    background-color: #fafafa;
    color: #252525;
}

/*Footer*/
#social-media {
    text-align: center;
    padding: 20px 0;
    display: flex;
    justify-content: space-evenly;
    list-style-type: none;
}

#social-media i {
    font-size: 160%;
    padding: 5%;
}

/* Media query: large or landscape phones (576px and up) */
@media screen and (min-width: 576px) {
    #photos {
        column-count: 2;
        column-gap: 0;
    }
}

/* Media query: tablets and larger (768px and up) */
@media screen and (min-width: 768px) {

    /* Header */
    nav {
        display: block;
        position: relative;
        box-shadow: none;
        width: fit-content;
        padding-top: 1.5rem;
    }

    #menu {
        display: flex;
    }

    #menu>li {
        padding-left: 1rem;
    }

    #nav-toggle-label {
        display: none;
    }

    #logo {
        font-size: 280%;
        line-height: 75px;
        margin: 0 0.5rem;
    }

    /*Main*/
    main {
        margin-top: 75px;
    }

    /*Hero*/

    #cover-text {
        width: 400px;
        right: 0;
    }

    /*About us*/
    #about {
        height: 400px;
    }

    /* Gallery */
    #photos {
        column-count: 3;
    }

    /*Sign up*/
        #signup {
            background-position: center;
            position: relative;
            align-content: center;
        }
    
        #signup-form {
            position: absolute;
            left: 50%;
            top: 100px;
          
        }
    
        .form-input:hover {
            border-color: #4d4d4d;
        }
    
        .join-button:hover {
            background-color: #3f3f3f;
            color: #fafafa;
        }
}

/*Media query: laptops and larger (992px and up)*/
@media screen and (min-width: 992px) {
    #menu a:hover {
        border-bottom: 1px solid #3a3a3a;
    }
}

<!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" />
    <!--Meta tags for search engines-->
    <meta name="description" content="Bens Chess Club. Chess club. Chess. Club for chess players. Kids chess club" />
    <meta name="keywords" content="Bens Chess Club, Chess. Chess club. Chess Players" />
    <!--Stylesheet-->
    <link rel="stylesheet" href="assets/style.css" />
    <!--Favicon-->
    <link rel="apple-touch-icon" sizes="180x180" href="assets/favicon_io/apple-touch-icon.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="assets/favicon_io/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="assets/favicon_io/favicon-16x16.png" />
    <link rel="manifest" href="assets/favicon_io/site.webmanifest" />
    <!--Title-->
    <title>Ben's Chess Club</title>
</head>

<body>
    <!--Header-->
    <header>
        <a href="index.html">
            <h1 id="logo">Ben's Chess Club</h1>
        </a>
        <input type="checkbox" id="nav-toggle" name="nav-toggle">
        <label for="nav-toggle" id="nav-toggle-label"><i class="fa-solid fa-bars"
                style="color: #17191c;"></i></i></label>
        <nav>
            <ul id="menu">
                <li><a href="index.html">Home</a></li>
                <li><a href="gallery.html">Gallery</a></li>
                <li><a href="sign-up.html" class="active">Sign Up</a></li>
            </ul>
        </nav>
    </header>

    <!--Main-->
    <main>
        <section id="signup">
            <form id="signup-form" method="POST" action="https://formdump.codeinstitute.net">
                <h2>Want to join us? Well lets get you signed up</h2>
                <label for="first_name">First Name</label>
                <input type="text" name="first_name" id="first_name" class="form-input" required>
                <br>
                <label for="last_name">Last Name</label>
                <input type="text" name="last_name" id="last_name" class="form-input" required>
                <br>
                <label for="email_address">Email Address</label>
                <input type="email" name="email_address" id="email_address" class="form-input" required>
                <br>
                <label for="dob">Date of birth</label>
                <input type="date" name="dob" id="dob" class="form-input" required>
                <br>
                </div>
                <button type="submit" class="join-button">Sign up</button>
            </form>
        </section>
    </main>

    <!--Footer-->
    <footer>
        <ul id="social-media">
            <li><a href="https://en-gb.facebook.com/" target="_blank" rel="noopener"
                    aria-label="Visit our facebook page (opens in new tab)"><i class="fa-brands fa-facebook"
                        style="color: #2c56a0;"></i></a></li>
            <li><a href="https://twitter.com/home" target="_blank" rel="noopener"
                    aria-label="Visit our Twitter page (opens in new tab)"><i class="fa-brands fa-x-twitter"
                        style="color: #1a1c1e;"></i></i></a></li>
            <li><a href="https://www.instagram.com/" target="_blank" rel="noopener"
                    aria-label="Visit our instagrampage (opens in new tab)"><i class="fa-brands fa-instagram"
                        style="color: #640c61;"></i></a></li>
            <li><a href="https://www.youtube.com/" target="_blank" rel="noopener"
                    aria-label="Visit our Youtube (opens in new tab)"><i class="fa-brands fa-youtube"
                        style="color: #fd2626;"></i></a></li>
        </ul>
    </footer>
    <!--Font awsome kit-->
    <script src="https://kit.fontawesome.com/bf524db846.js" crossorigin="anonymous"></script>
</body>

</html>

Tags: css html

Answers

- AbdullahAhmad
- August 29, 2023 at 9:32 pm
- 0 votes
0
I tried it in my local environment. You have this on line 338:
```
#signup-form {
            position: absolute;
            left: 50%;
            top: 100px;
}
```
This is the code that causes your form box to become like a box and not cover the whole screen. You are including it within a media query that says "@media screen and (min-width: 768px) {…}" so it will only work when min-width of your screen is that of a laptop/computer.

Simply cut this CSS and paste it around line 20, in the general styles section so that it works for every screen size. Hope I helped.
Login or Signup to reply.

You’re very close. Consider the style applied to the <form> here:

left: 50%;

Specifically, this is applied to the left edge of the element. So the left edge of the <form> is in the center of the page. From there, you can further adjust the element with a transform style, adjusting it back along the X axis by -50% of the element itself:

transform: translateX(-50%);

For example:

/*Google Fonts*/
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Pacifico&display=swap');

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

/*General Styles*/
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /*Generic project styles*/
    color: #3a3a3a;
    font-family: "lato", sans-serif;
}

h1 {
    font-family: "pacifico", sans-serif;
    color: #252525;
}

.white-background {
    background-color: #ffffff;
}

.black-background {
    background-color: #252525;
}

.white-text {
    color: #ffffff;
}

.black-text {
    color: #252525;
}

.hidden {
    display: none;
}

/*header*/
header {
    background-color: #ffffff;
    padding: 0 1rem;
    position: fixed;
    z-index: 10;
    width: 100%;
    box-shadow: 0 2px 2px #3a3a3a;
    display: flex;
    justify-content: space-between;
    white-space: nowrap;
}

header a {
    text-decoration: none;
    color: inherit;
}

h1 {
    font-family: "pacifico", sans-serif;
    color: #252525;
}

#menu {
    font-size: 110%;
    list-style-type: none;
}

#menu li {
    margin-bottom: 1em;
}

.active {
    border-bottom: 1px solid #3a3a3a;
}

/*Navbar styles with dropdown toggle*/
nav {
    position: absolute;
    background-color: #ffffff;
    width: 100%;
    box-shadow: 0 2px 2px #3a3a3a;
    padding: 0 1rem;
    left: 0;
    display: none;
    justify-content: space-between;
    align-items: baseline;
    top: 100%;
}

/*nav toggle*/
#nav-toggle:checked~nav {
    display: block;
}

#nav-toggle {
    display: none;
}

#nav-toggle-label {
    font-size: 2rem;
}

/*Main*/
main {
    margin-top: 55px;
    flex: 1 0 auto;
}

/*Hero*/
#hero {
    height: 600px;
    width: 100%;
    background: url("../assets/images/pexels-anastasia-shuraeva-8466017 (1).jpg") no-repeat center center/cover;
    position: relative;
}

#hero h2 {
    font-family: "pacifico", sans-serif;
}

#hero h2,
#hero h3 {
    color: #ffffff;
}

#cover-text {
    background-color: rgba(0, 0, 0, .7);
    font-size: 130%;
    position: absolute;
    bottom: 30px;
    width: 89%;
    min-height: 200px;
    padding-top: 40px;
    padding-left: 10px;
}

/*About us*/
#about {
    height: 600px;
    width: 100%;
    color: #ffffff;
    padding-top: 2rem;
}

#about-us {
    text-align: center;
}

#about-us h1 {
    font-size: 170%;
    font-family: inherit;
}

#about-us {
    font-size: 130%;
}

#what-we-offer {
    padding-top: 2rem;
    text-align: center;
}

#offer-list li {
    padding: 20px;
    text-align: center;
}

/*Club times*/
#club-times h1 {
    color: #ffffff;
    padding-top: 1rem;
    text-align: center;
    font-family: inherit;
    text-align: center;
}

#club-times {
    display: flex;
    flex-wrap: wrap;
    /* Allow wrapping to multiple rows */
    justify-content: center;
    /* Center content horizontally */
    align-items: stretch;
    /* Stretch items to fill the container vertically */
    padding: 2rem 0;
    text-align: center;
    background-color: #252525;
    color: #ffffff;
}

#club-times div {
    padding: 1rem;
    text-align: center;
    flex-basis: 200px;
    flex-grow: 1;
}

/*Gallery*/
#photos img {
    width: 100%;
    line-height: 1em;
}

#photos {
    line-height: 0;
}

/*Sign up*/

#signup{
    background-color: #ffffff;
}

#signup-form {
    color: #ffffff;
    background-color:#252525;
    padding: 30px;
}

#signup-form>h2 {
    color: #fafafa;
    margin-bottom: 20px;
}

.form-input {
    background: transparent;
    color: #fafafa;
    width: 100%;
    height: 25px;
    margin: 5px 0 20px 0;
    border: 1px solid #fafafa;
    border-radius: 2px;
    padding: 0 5px;
}

.radio-buttons {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.join-button {
    margin-top: 20px;
    border-radius: 2px;
    padding: 15px 32px;
    font-size: 100%;
    background-color: #fafafa;
    color: #252525;
}

/*Footer*/
#social-media {
    text-align: center;
    padding: 20px 0;
    display: flex;
    justify-content: space-evenly;
    list-style-type: none;
}

#social-media i {
    font-size: 160%;
    padding: 5%;
}

/* Media query: large or landscape phones (576px and up) */
@media screen and (min-width: 576px) {
    #photos {
        column-count: 2;
        column-gap: 0;
    }
}

/* Media query: tablets and larger (768px and up) */
@media screen and (min-width: 768px) {

    /* Header */
    nav {
        display: block;
        position: relative;
        box-shadow: none;
        width: fit-content;
        padding-top: 1.5rem;
    }

    #menu {
        display: flex;
    }

    #menu>li {
        padding-left: 1rem;
    }

    #nav-toggle-label {
        display: none;
    }

    #logo {
        font-size: 280%;
        line-height: 75px;
        margin: 0 0.5rem;
    }

    /*Main*/
    main {
        margin-top: 75px;
    }

    /*Hero*/

    #cover-text {
        width: 400px;
        right: 0;
    }

    /*About us*/
    #about {
        height: 400px;
    }

    /* Gallery */
    #photos {
        column-count: 3;
    }

    /*Sign up*/
        #signup {
            background-position: center;
            position: relative;
            align-content: center;
        }
    
        #signup-form {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 100px;
          
        }
    
        .form-input:hover {
            border-color: #4d4d4d;
        }
    
        .join-button:hover {
            background-color: #3f3f3f;
            color: #fafafa;
        }
}

/*Media query: laptops and larger (992px and up)*/
@media screen and (min-width: 992px) {
    #menu a:hover {
        border-bottom: 1px solid #3a3a3a;
    }
}

<!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" />
    <!--Meta tags for search engines-->
    <meta name="description" content="Bens Chess Club. Chess club. Chess. Club for chess players. Kids chess club" />
    <meta name="keywords" content="Bens Chess Club, Chess. Chess club. Chess Players" />
    <!--Stylesheet-->
    <link rel="stylesheet" href="assets/style.css" />
    <!--Favicon-->
    <link rel="apple-touch-icon" sizes="180x180" href="assets/favicon_io/apple-touch-icon.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="assets/favicon_io/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="assets/favicon_io/favicon-16x16.png" />
    <link rel="manifest" href="assets/favicon_io/site.webmanifest" />
    <!--Title-->
    <title>Ben's Chess Club</title>
</head>

<body>
    <!--Header-->
    <header>
        <a href="index.html">
            <h1 id="logo">Ben's Chess Club</h1>
        </a>
        <input type="checkbox" id="nav-toggle" name="nav-toggle">
        <label for="nav-toggle" id="nav-toggle-label"><i class="fa-solid fa-bars"
                style="color: #17191c;"></i></i></label>
        <nav>
            <ul id="menu">
                <li><a href="index.html">Home</a></li>
                <li><a href="gallery.html">Gallery</a></li>
                <li><a href="sign-up.html" class="active">Sign Up</a></li>
            </ul>
        </nav>
    </header>

    <!--Main-->
    <main>
        <section id="signup">
            <form id="signup-form" method="POST" action="https://formdump.codeinstitute.net">
                <h2>Want to join us? Well lets get you signed up</h2>
                <label for="first_name">First Name</label>
                <input type="text" name="first_name" id="first_name" class="form-input" required>
                <br>
                <label for="last_name">Last Name</label>
                <input type="text" name="last_name" id="last_name" class="form-input" required>
                <br>
                <label for="email_address">Email Address</label>
                <input type="email" name="email_address" id="email_address" class="form-input" required>
                <br>
                <label for="dob">Date of birth</label>
                <input type="date" name="dob" id="dob" class="form-input" required>
                <br>
                </div>
                <button type="submit" class="join-button">Sign up</button>
            </form>
        </section>
    </main>

    <!--Footer-->
    <footer>
        <ul id="social-media">
            <li><a href="https://en-gb.facebook.com/" target="_blank" rel="noopener"
                    aria-label="Visit our facebook page (opens in new tab)"><i class="fa-brands fa-facebook"
                        style="color: #2c56a0;"></i></a></li>
            <li><a href="https://twitter.com/home" target="_blank" rel="noopener"
                    aria-label="Visit our Twitter page (opens in new tab)"><i class="fa-brands fa-x-twitter"
                        style="color: #1a1c1e;"></i></i></a></li>
            <li><a href="https://www.instagram.com/" target="_blank" rel="noopener"
                    aria-label="Visit our instagrampage (opens in new tab)"><i class="fa-brands fa-instagram"
                        style="color: #640c61;"></i></a></li>
            <li><a href="https://www.youtube.com/" target="_blank" rel="noopener"
                    aria-label="Visit our Youtube (opens in new tab)"><i class="fa-brands fa-youtube"
                        style="color: #fd2626;"></i></a></li>
        </ul>
    </footer>
    <!--Font awsome kit-->
    <script src="https://kit.fontawesome.com/bf524db846.js" crossorigin="anonymous"></script>
</body>

</html>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – how do i make the form be center

Answers