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

Learning Challenge

HTML/CSS Assessment

Question

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.

Screenshots

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:

2 Likes

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.

css:
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.