skip to Main Content

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>

2

Answers


  1. 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.
  2. 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>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search