App Academy

HTML/CSS Assessment Media help

I need help with the @media rules in the assignment.

  • … is 600px wide when the screen is greater than or equal to 600px wide
  • … uses grid layout to layout labels and form elements when the screen is greater than or equal to 600px wide
  • … is the width of the screen when the screen is less than 600px wide
  • … lays out the labels and form elements as full width when the screen is less than 600px wide

I’m not sure how to know if I’m doing this right. For this one “lays out the labels and form elements as full width when the screen is less than 600px wide” do I have to lay out all the elements in the form?

Hi Valeria - welcome to the forum!

These are great questions!

First, I notice a few details in your code that will likely make it difficult to see if your code is responding properly in the browser. Let’s tackle those first, then we can talk about the form width.

  • on line 90, your css for the label is embedded inside your css for the form. Just make sure you end the form section with the curly bracket before starting the label section.
  • on line 98, you will need to add px to the end of your number.

Once those two syntax errors are addressed, you should be able to watch how your code behaves in the browser when you make the screen wider and smaller. When the screen is less than 600px wide, the form elements should all span across the entire width of the screen, but as you make the screen wider, after a certain point (600px), the form elements should stay that wide even when the screen continues to grow.

The tests for the is assessment specifically target the <form>. My recommendation for the other elements within the form element is to give them values that look good visually within your form at both widths. Again, you check this by looking at the browser as you make the screen wider and narrower.

So, make those minor syntax changes, and then check out the behavior in the browser before adjusting any other details. Let us know how it turns out, or if you have any other questions!
Jesse

Hi ,
Thank you!!

I fixed those mistakes.
The from looks good when moving the screen wider or narrower but I’m not sure how correct i did it.

Yes, it looks like your code makes sense, and if it responding well in the browser then you should be all set!
Jesse