How do I get a form element that is 600px when the window is wider than 600px?
Question
Need to complete an html/css assessment as part of the admissions process of getting into a coding bootcamp. I submitted this code but I got feedback saying that I didn't have "a 'form' element that is 600px when the window is wider than 600px". I'm very confused as I clearly specified within the code that no element will exceed 600px regardless of screen size. I'm in a bit of a time crunch and have a limited amount of attempts at this assessment so any help would be appreciated.
<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>
and this is the CSS:
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);
}
}
1 answers
solution1
0 2022-08-23 04:27:53
what you coded should be correct, when the screen exceeds 600px, the form stays at 600px
form { width: 100%; } @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); } }
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
CSS Help for a project. Page needs to have a 'form' element that is 600px when the window is wider than 600px and
Using media queries how do I make a form that is 600px wide when the screen is greater than or equal to 600px wide (my code included)?
How to disable OverlayScrollbars when window width equal 600px?
how to remove div if window is smaller then 600px
With media query how do I make a form that uses grid layout to layout labels and form elements when the screen is greater than or equal to 600px wide?
Media query doesn't work when i resize screen less than 600px
How can I change html images into a slider when the display with is under 600px?
Make my 2 divs stack on screen smaller than 600px
Quasar - Vertical scrollbar not working on more than 600px width
Under 600px css issue
Related Tags