App Academy

1 last hurdle on the HTML/CSS assessment

HTML/CSS Learning Challenge

Feedback - “has a ‘form’ element that is 600px when the window is wider than 600px”

What I’ve tried – Posting screen shots of my code below. In short my only 2 ideas of what may correct this are that either I need another “@media” tag for when the screen is >= 600px or I change “max-width” to “width” in my first form element.

Screen shots -


I see that you have code for form at the top of your css file, and .form1 inside the media query. I think I would need to see how you have that element and class set up in your html to be able to weigh in on your ideas.

Can you share your html code just for the top of the form and where that class lives?

It does seem that the css for form has the attribute max-width set to 600px, but maybe your columns in the grid are reformatting the form width. Like @jbyers mentioned, you need to provide the html to see more.

Why do you have a form element and form1 class? The HTML/CSS Learning Challenge will check if the form element is 600px when the screen is greater than or equal to 600px. You can visualize this in the browser and inspect if this is the case.

You could add a new media query with min-width set to 600px, and inside of this query, set the max-width or width of the form element to 600px.

form { max-width: 600px } or form { width: 600px}

I recommend searching the forum as other people have asked the same questions.


1 Like