App Academy

HTML / CSS assessment

I have already wasted two tries because I do not understand what the assignment is asking of me. I am stuck at 11/12 for the same question
* has a ‘form’ element that is 600px when the window is wider than 600px

1 Like

Hi Eric, and welcome to the forum!

I know this one can feel frustrating, but I feel like you are really close to the solution here.

First, I recommend adjusting the max and min width numbers in your media queries so they do not overlap at 600px. So, for example, the query for small screens could have a max of 599px while the query for large screens could start at 600px.

In your query for the larger screen (the bottom one), your current code is likely showing the form continue to grow even past 600px, since you have the form width set to auto. I recommend checking out the width documentation to see other values you could use for the width attribute in the bottom media query.

Jesse

Sorry for the late reply, I had class.
To clarify, I should set the max and min width respectively so they do not conflict with each other, and not use auto, for the width at 600px>=. Right now I changed the width to be set to exactly 600px instead of auto, and from what I see, there is a major difference between 599 and 600 px.

Yes, that approach makes sense. When you change the screen size in the browser, are you now seeing the form stay that same size on the wider screens?

I took it a step further and have the form moved based on the width of the screen. It stays the same width, until 599 px, but it will move left and right. I am a little scared that adding this will ruin the check. It is similar to what was done in the add-user html in the examples

Nice! It’s cool to see you are adding extra details!

The tests specifically target the width attribute of the form, so as long as it is 600px on the wider screens and full width on the narrower screens, it should still pass the form width tests.

1 Like

Thank you for the assistance!

1 Like