Nervous, I used two of my attempts. HTML/CSS 8 out of 12

Learning Challenge

HTML/CSS Assessment


1.has a ‘form’ element that is as wide as the window when the window is narrower than 600px
2. has exactly one input with a name of ‘pet_name’ and an associated label with the content ‘Name’
3. has exactly one ‘select’ element with a name of ‘pet_type’ and an associated label with the content ‘Type’
4. has exactly five ‘options’ elements in the ‘select’ element

What I’ve tried

  1. I tried resizing the card, changing the radius, originally there was no radius in my code but I added it on my second attempt. I am unsure on how to fix this.
  2. I’m lost on this one because I see ‘pet_name’ there in the code.
  3. I made the ‘for=’ and ‘id=’ match, they were slightly different during my first attempt.
    4.There are 5 options so where did I go wrong and how can I fix this?
    I have Cat, Dog, Hamster, Other and Zebra all as options, that should meet the ‘5 option’ criteria.


Hi, @Cpitt848! :wave: First off, welcome to the community, man. You’re super close. Let me see if I can point you in the right direction …

You’ll probably want to tinker with your CSS on lines 4, 12, and 19 in your screenshot. The goal is that if you set your browser to a width of 500px … your form should be 500px. If you set your browser to a width of 800px … your form would stop growing (have a max width) at 600px;

Be sure to re-read the criteria. You’re super closer here, but you’ve just got the wrong values in the id attribute. As a little more guidance … the name of the id has to be something specific. And when you click on the actual text for the label in your browser … it should put your keyboard cursor into the text field. That is the purpose of the for attribute on the label element.

I hope that helps! I want to see 12/12 on your next submission! :tada: :confetti_ball: :partying_face: :raised_hands:


New html:
I changed the id and also when I click the text, the cursor now goes into the text field.
How does this look.

do you have an example of this? I’m looking for resources but can’t find any

Here is an example of using a max-width on a form

You should be able to use that as a guide for your own CSS.

Thank you for that, I changed line 19 and now the screen adjusts when I make it smaller.

Do you think my HTML/CSS code is ready for submission? I don’t want to waste another attempt.