I'm doing an assignment in Html and CSS using grid layout and I know my code is sloppy since I'm just starting to learn. I have two issues that are preventing me from passing this assignment and they are:
- have a form element that is as wide as the window when the window is narrower than 600 px
I thought I had that in the code with the width and also my media screen changes the form size when the window is less than 600 px. Also, I only have one form element, but for some reason, I keep getting the two above mentioned errors when being graded, can someone assist me?
my html and css:
form {
display: grid;
grid-template-columns: 0.7fr 1.3fr;
grid-template-rows: 0.2fr 0.2fr 0.2fr 0.2fr 0.2fr;
gap: 1px 1px;
grid-template-areas: ". ." ". ." ". ." ". ." ". .";
width: 600px;
}
select {
width: 200px;
}
.name {
grid-column: 1 / 1;
}
.type {
grid-column: 2 / 2;
}
.bio {
grid-column: 1 / 1;
}
.email {
grid-column: 2 / 2;
}
.submit {
grid-column: 1 / 2;
}
.reset {
grid-column: 3 / 2;
}
@media screen and (max-width: 600px) {
button,
input,
textarea,
select,
label {
display: block;
margin: 0;
text-align: left;
width: 100%;
}
}
/* card */
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.3);
transition: 0.3s;
width: 344px;
}
.card:hover {
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.3);
}
.container {
padding: 16px 16px;
}
div.title {
font-size: 22px;
color: #000;
}
div.secondary {
font-size: 11px;
color: #232F34;
} <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Assessment</title>
<link rel="stylesheet" href="site.css">
</head>
<body>
<!-- Your markup goes here. -->
<form action="/pets" method="post">
<fieldset>
<legend>Add Pet</legend>
<div class="formgrid">
<div class="name">
<label for="name">Name</label>
<input type="text" id="name" name="pet_name">
</div>
<div class="type">
<label for="type">Type</label>
<select id="type" name="pet_type">
<option value="cat">Cat</option>
<option value="dog">Dog</option>
<option value="hamster">Hamster</option>
<option value="other">Other</option>
<option value="zebra">Zebra</option>
</select>
</div>
<div class="bio">
<label for="bio">Biography</label>
<textarea id="bio" name="pet_bio"></textarea>
</div>
<div class="email">
<label for="owner-email">Owner's Email</label>
<input type="email" id="owner-email" name="pet_owner_email">
</div>
<div class="submit">
<button type="submit" id="new-pet-submit-button">Create new pet</button>
<button type="reset">Reset</button>
</div>
</div>
</fieldset>
</form>
<!----card---->
<div class="card">
<img src="images/desert.jpg" alt="Avatar" height="height:194px" width="344px">
<div class="container">
<div class="title">Title goes here</div>
<div class="secondary">
<img src="images/person-avatar.jpg" alt="Avatar" class="avatar" style="width:40px">
Secondary text
<p>
Greyhound divisively hello coldly wonderfully marginally far upon excluding.
</p><br>
</div>
</div>
</body>
</html>