HTML/CSS assessment- Grid Layout 600px form when screen is > 600px

Learning Challenge

HTML/CSS Assessment

Question

Did I do the grid layout correct? It looks fine when I adjust the screen, the form stays at 600px when the screen is larger than 600px and minimizes to fit the screen when the screen is smaller. I am just not sure if I did the grid layout correct. I got 11/12 for the assessment and the only thing I missed was has a ‘form’ element that is 600px when the window is wider than 600px I had to adjust my grid layout and I want to double-check before I submit it in that I have done the grid part correct as well.

What I’ve tried

What I did was adjust the widths and max-widths, and I removed the grid layout things I previously did. I have a before and after screenshot.

Screenshots

Corrected one

This is the original code I did.

This is the corrected webpage.

Hi, and welcome to the community!

Since this is an assessment, I can’t explicitly tell you whether you have it correct or not.

Based on the error you got…

has a ‘form’ element that is 600px when the window is wider than 600px

…it looks like one of the major changes you made was applying styles to the <form> element instead of the <fieldset>, which is a smart move. In your min-width media screen, you could simplify and just set the number of pixels for the width, since the width should always be the same on the larger screens.

In terms of the grid, you should be all set just using display:grid - this test will not be checking that detail.

Let us know how it goes!
Jesse

Thank you! I passed the HTML/CSS assessment. I am now moving on to Git.

1 Like