- 1 2 3 Margin 0px Padding 0 N Min 4 5 6 7 000 Media Screen And Min Width 600px Form Display Grid Width 60 1 (45.37 KiB) Viewed 40 times
got wrong?
1 2 3 *{margin: 0px; padding:0;} N min 4 5 6 7 000 @media screen and (min-width:600px) { form { display: grid; width: 600px; margin: 0 auto; position: relative; grid-template-columns: 600px; } } 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 @media screen and (max-width:601px) { form display: grid; position: relative; grid: template columns 601px; width: 100%; } 23 24 25 26 27 28 29 30 31 32 33 RA label, input, select, button, textarea { width: 100%; }
<body> <!-- Your markup goes here. --> <form action="/pets" method="get"> <fieldset> <div> <label for="name">Name</label> <input type="text" id="name" name="pet_name"> </div> 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 <div> <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="Zebra">Zebra</option> <option value="Other">Other</option> </select> </div> <div> <label for="bio">Biography</label> <textarea name="pet_bio" id="bio"></textarea> </div> 38 39 40 <div> <label for="email">Owner's Email</label> <input type="email" name="pet_owner_email" id="owner-email"> </div> 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 <div> <button type="submit" id="new-pet-submit-submit-button">Create New pet</button> <button type="reset">Reset</button> </div> </fieldset> </form> <div class="card" width="344px"> <img src="./images/desert.jpg" id="desert_pic" alt="desert" height="194px" width="344px"> <div class="profile"> <img class="avator" src="./images/person-avatar.jpg" alt="profile picture">
The questions you missed were: has a 'form' element that is 600px when the window is wider than 600px has exactly one input with a name of 'pet_name' and an associated label with the content 'Name' has exactly one 'select' element with a name of 'pet_type' and an associated label with the content Type has exactly five 'options' elements in the 'select' element has exactly one reset 'button' elements that has the content 'Reset'