HTML/CSS assessment help

Hello friends,

I keep encountering a few errors that don’t seem that difficult to solve, but I don’t want to use another attempt without some advice. The code below has all been updated to correct the errors, but I’m anxious to submit and use another submission. Please advise if these will fix the issues. Thank you!

First error:

  • has a ‘form’ element that is as wide as the window when the window is narrower than 600px

Here is my code:

   @media screen and (max-width: 600px) {
        legend {
                text-align: center;
        }

    	label {
    		width: 100%;
    		text-align: left;
    		font-size: 0.9em;
    	}

    	input,
    	select,
    	textarea {
    		width: 100%;
    		margin: 0.5em;
    		padding: 0.5rem 0.5rem;
    	}

    	form {
    		width: 100%;
    	}

Other errors:

  • 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

My code:

 <div>
      <label for="Name">Name</label>
      <input type="text" id="Name" name="pet_name">
    </div>

    <div>
      <label for="Type">Type</label>
      <select type="dropdown" 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>

Thanks for the feedback in advance. I’m really anxious about hitting submit again, so I appreciate the guidance.

Best,
Kevin

Hi, @kzieber! Welcome to the community! Great job for your first attempt! :moneybag: :dollar: :money_with_wings: :money_mouth_face:

Now on to the feedback …

Form width below 600px

If you look at the CSS that you submitted you have this chunk of CSS …

form {
	padding: 1em;
	margin: 0 auto;
	width: 600px;
}

That width right there … is basically saying, “Regardless of what happens, I want this form to stay 600px.” That goes against what the assessment is asking for. Specifically for this specific form width requirement. You should look into changing that width to a max-width and see if that helps you out.

For the other errors …

Here are the requirements from the assessment …

I’ve underlined the important parts for you … notice the “casing” for the id attributes. :wink:

Hope that helps! Let us know if you have any other questions!

Best of luck in your next attempt! :four_leaf_clover:

On a side note, the style of your form is top notch! You went above and beyond for making the form look nice! :+1: