App Academy

HTML/CSS Errors

Learning Challenge

Create New Pet Page

Question

I have submitted my assessment twice and got a score 10/12. I issues I received are as followed:

  • has a ‘form’ element that is 600px when the window is wider than 600px
  • has exactly one ‘select’ element with a name of ‘pet_type’ and an associated label with the content ‘Type’

What I’ve tried

I have tried, in CSS, form {max-width: 600px} and that is inside @media screen and (min-width:600px) but I was wrong. Also, the second issue, I don’t know what else to change as the only one element in my HTML, with name=“pet-type”, and a element that contains ‘Type’.

Below are screenshot of my HTML, CSS, and what the page looks like at full screen and under 600px.

Screenshots Forum 7

Thank you for your time and help.

Hi, and welcome to the community!

It looks like you are really close!

From the code above, I can see that the select element error is just a minor typo. Double check how you are associating the select element with the label, and make sure the spelling, case, etc match perfectly.

For the form width error, I think the issue is that you have identified a max-width, but not a base width. The max-width attribute basically says “follow the width setting, but don’t let it go above x pixels”. But it relies on a base width setting. Try setting the width instead of a max-width in your large screen media query, and see if it behaves as you would like in the browser.

Good luck!
Jesse

Hi jbyers,

I have checked the first issue and haven’t noticed anything that need changing that effects the webpage.
For the second issue I have tried setting the width of the form to 600px on my first attempt and still failed to I tried the max-width element but that didn’t work either.

Can you send me your email address? I can pull up your actual submission and double check that the code you posted here is the same as the code that was submitted. Just send me the email address associated with your assessment in a direct message and I can check it out for you in more detail.
Jesse

Of course. My email is Jarumlcarr@gmail.com

Hi Jarum,
I was able to pull up your submission, and it looks like what you submitted is the same as the code you posted…so that’s good news - we know there is not an issue with submitting your code.

I do see a typo related to how you are associating your select tag with the label in the pet type section (lines 42-51). It is a very minor detail, but even those small details can cause the tests to fail. Think about which attributes are supposed to match, and make sure each character is identical.

For the form width issue, when I look at all of your code, I can see that the only place you are defining the form width is in your media query for large screens, which sets a max-width of 600px. But anytime the screen is wide, you want your form to be exactly 600px wide. I would recommending trying to use width instead of max-width, and see how it responds in the browser.

Jesse

Hi Jesse,

I changed

for=“Type” to for=“type”

form {
width:600px;
width: 100%;
}

I added width:100%; because on screens under 600px, the form would extend beyond the scope of the screen.
Would making these changed solve my issues?

Bingo - you found the typo. I know it can be frustrating, but little details like that can be the difference between passing and failing the tests.

For form-width, you are getting close. Setting width: 100% will make the width fill the entire screen. You really don’t want to define width with two different values, though, as they will conflict with each other.

I would take a look at your HTML - I believe you have a container or wrapper that includes the form and the picture card together, and that may be causing some issues with the form falling off of the screen. If you take out that wrapper and have the form and card completely separate, you may see better behavior.
Jesse

I put form { width: 600px; } but now the webpage won’t resize to fit the screen.

I assume the assessment is checked automatically. Will have form { width: 600px; } let me pass despite the issue of not fitting the screen?