HTML/CSS Assessment 11/12 help

Hi y’all,
So I submitted the assessment and I still have one wrong. This is my third attempt. The question was;

**has a ‘form’ element that is as wide as the window when the window is narrower than 600px

This is my css style sheet below. I’ve made the min-width 600px and the width 600px. I don’t know what else is missing or needs to be changed.

Thanks for the help!

Hi Adji,
The code you have above with min-width 600px satisfies one of the other requirements - it ensures that the form stays at 600px wide even when the screen is wider.

The test that failed for you is this one:

has a 'form' element that is as wide as the window when the window is narrower than 600px

So, translated into English, you need to write some CSS to make sure that when the window is smaller than 600px wide, the form also reduces its width to match the width of the window.

One way to do this would be to set another media-screen with max-width of 599px.
I would recommend checking out and playing around with this resource to explore the width and max-width properties and different ways to set their values (with pixels, percentages, auto, etc).

I hope this helps - let us know how it goes!

1 Like

Hi Jesse,
I tried this instead and I still didn’t pass the test.

You’re really close! You made half of the fix, just a little more to add.

Look at your original media screen at the top of the code. You have a section inside of the media-screen that sets the width of the form (in that case, you set it to 600px.

Similarly, you will need to a section to set the width of the form inside your new media screen. But you don’t want it set to 600px…you’ll need to figure out which width value you can use so that it automatically sizes to the window width, when the window is less than 600px wide.

Like I said, you are getting very close!

Thank you so much for your help Jesse! I’m about to submit it one last time, and I just want to make sure I’m close as this is my last attempt.

Actually, you want to keep the top media screen the same as you originally had it - that one passed the test already.

The advice I gave in the reply above was in regards to the bottom media screen. You need a section in that media screen that sets the width (by pixels, percentage, or auto).

I can’t really do any more final-checking (since it is an assessment), but feel free to test it out in your browser - you can drag the corner of the browser window to see if the form stays inside the window when you make it narrow. If not, you’ll have to keep working on it.

While I can’t really do a final check, feel free to ask more questions or look through some of the previous posts for ideas.