As part of the application process for a coding bootcamp, I have been asked to complete an HTML/CSS assessment. After submitting my code, I received feedback stating that there was no 'form' element set to 600px when the window width exceeded 600px. This feedback has left me puzzled as I made it clear in the code that no element should exceed 600px regardless of screen size. With limited attempts at this assessment and a tight deadline, any assistance would be greatly appreciated.
form {
width: auto;
}
@media screen and (min-width: 600px) {
/* big */
.form {
max-width: 600px;
display: block;
/* display: block; is a maybe */
grid-template-columns: 1fr;
/* grid-template-columns: 1fr; is also a maybe */
}
label {
display: block;
margin: 0;
text-align: left;
width: auto;
}
input,
select,
textarea {
width: 100%;
}
.center {
margin: auto;
width: 50%;
border: 3px;
}
.wrapper {
display: grid;
grid-template-columns: repeat(1fr);
gap: 12px;
}
.one {
grid-row: 1;
max-width: 600px;
}
.two {
grid-row: 2;
max-width: 600px;
}
.three {
grid-row: 3;
max-width: 600px; /*added later*/
}
.four {
grid-row: 4;
max-width: 600px;
}
.five {
grid-row: 5;
max-width: 600px;
}
.card {
width: 344px;
background-color: #E0E0E0;
padding: 5px;
margin: 0;
}
.desertIm {
height: 194px;
width: 100%;
}
.title {
color: #000;
font-size: 22px;
}
.secondarytxt {
color: #232F34;
}
.bodytxt {
font-size: 11px;
color: #232F34;
margin: 16px;
}
.avatar {
height: 40px;
width: 40px;
border-radius: 50%;
position: relative;
top: 20%;
left: 15%;
}
}
/* divider */
.item1 {
grid-area: header;
}
.item2 {
grid-area: avatar;
}
.item3 {
grid-area: sec;
}
.item4 {
grid-area: title;
}
.item5 {
grid-area: body;
}
.card {
display: grid;
grid-template-areas:
"header header header header header header"
"avatar title title title title title"
"avatar sec sec sec sec sec"
"body body body body body body";
}
.card > div {
text-align: left;
background-color: white;
}
.card:hover {
box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
}
/* divider */
@media screen and (max-width: 600px) {
form {
width: 100%;
}
label {
display: block;
margin: 0;
text-align: left;
width: auto;
}
input,
select,
textarea {
width: 100%;
}
.card {
width: 344px;
background-color: #E0E0E0;
padding: 5px;
margin: 0;
}
.desertIm {
height: 194px;
width: 100%;
}
.title {
color: #000;
font-size: 22px;
}
.secondarytxt {
color: #232f34;
}
.bodytxt {
font-size: 11px;
color: #232f34;
margin: 16px;
}
.avatar {
height: 40px;
width: 40px;
border-radius: 50%;
position: relative;
top: 20%;
left: 15%;
}
.item1 {
grid-area: header;
}
.item2 {
grid-area: avatar;
}
.item3 {
grid-area: sec;
}
.item4 {
grid-area: title;
}
.item5 {
grid-area: body;
}
.card {
display: grid;
grid-template-areas:
"header header header header header header"
"avatar title title title title title"
"avatar sec sec sec sec sec"
"body body body body body body";
}
.card > div {
text-align: left;
background-color: white;
}
.card:hover {
box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
}
}<html>
<body>
<div class="center wrapper form">
<form action="/pets" method="post">
</form>
<div class="one">
<label for="name">Name</label>
<input type="text" id="name" name="pet_name">
</div>
<div class="two">
<label for="type">Type
<select name="pet_type" id="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>
</label>
</div>
<div class="three">
<label for="biography">Biography</label>
<textarea id="bio" name="pet_bio" rows="4" cols="50">
</textarea>
</div>
<div class="four">
<label for="email">Owner's Email</label>
<input type="email" id="owner-email" name="pet_owner_email">
</div>
<div class="five">
<button type="submit" id="new-pet-submit-button">Create new pet</button>
<button type="reset">Reset</button>
</div>
<!-- divider -->
<div class="card">
<div class="item1"><img src="images/desert.jpg" class ="desertIm"></div>
<div class="item2"><img src="images/person-avatar.jpg" class="avatar"></div>
<div class="item3"><body><p class="secondarytxt">Secondary text</p></body></div>
<div class="item4"><h4><b class="title">Title goes here</b></h4></div>
<div class="item5"><body><p class="bodytxt">Greyhound divisively hello coldly
wonderfully marginally far upon excluding.</p></body></div>
</div>
</div>
</body>
</html>