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
I tried it in my local environment. You have this on line 338:
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.
You’re very close. Consider the style applied to the
<form>
here: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 atransform
style, adjusting it back along the X axis by-50%
of the element itself:For example: