App Academy

HTML\CSS assessment fail

Hello all. I recently received my 1st assessment score of 11/12. The question I missed was, (has a ‘form’ element that is 600px when the window is wider than 600px)

Here is an image of my CSS

Hi Tilly,
I can see that you have set up two media queries. In your second media query (for the narrow screen), you have styling defined for the form, giving it width: auto.

In the first media query (for wider screens), You have not defined any styling for the form.

There are several different ways of passing this test, but given the code that you already have, I would recommend defining the form size for the wider screens in your first media query.

As a sidenote: It looks like the sizes for your two media queries overlap at 600px. I would recommend changing the top query to min-width: 600px and the bottom query to max-width: 599px to avoid the overlap.

With any change you make, be sure to test out your code in the browser, and make the screen smaller and larger to make sure everything is behaving nicely before you re-submit.

Jesse

I added a form to my first media query and I flipped the min width and max width. That changed how my layout stretches across a wider than 600px screen. Im wondering if the images are supposed to stretch out as well or stay the same?

You don’t need to worry about the width of the picture card as the screen width changes, just the form.

I can see the changes you made, and how the form width is 100% for the narrow screens. Just double check your form width in the wide screen media query - it looks like you have also set it at 100%, which means that the form can be wider than 600px. You will need to change your form width in the wide screen media query so that it stays at 600px any time the screen is wider than 600px.

Jesse

Ok. I changed my wide screen media query form to 600px so it now stops stretching once I get past 600px. Here is what it looks like now.

1 Like