App Academy

HTML/CSS Assessment form width

Hi everyone!

I received a 8/12 score for my HTML/CSS assessment and these were the requirements I missed:

  • has a ‘button’ element which contains the exact text “Create new pet”
  • has two ‘input’ fields
  • has a ‘form’ element that is 600px when the window is wider than 600px
  • has exactly one reset ‘button’ elements that has the content ‘Reset’

I’ve amended the code (mostly the buttons and input fields) but I want to make sure my form element width statement is correct and will pass. The screenshot of my code is attached (I’ll comment the other screenshots below):


This is the relevant CSS code

Good morning! You may be over-complicating the form-width problem by trying to implement the media screen. While using media screen is one possible way to implement this, you can also implement it without it.

Basically, the assessment is asking you to make the form match the screen width, but when the screen-width hits 600px, the form should stop expanding with the screen, and should stay at 600px wide. Think about how you could use CSS code to make the form’s width not go above 600px.

Got it fixed. Turns out I just needed to explicitly state the form width instead of doing all the crazy pixel math.