HTML/CSS ASSIGNMENT Query

Hello, I missed 2 questions in my assignment.

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

  • has exactly one input with a name of ‘pet_name’ and an associated label with the content ‘Name’

Changed code from

image

TO

Edited Code

Changed code from

@media screen and (max-width: 600px){
/* remove the width from the so that
it is just as wide as the screen.*/
from {
width: 600px;
display:grid;
}
@media screen and (max-width:599px){
form{
width:100;
}
}
}

TO

@media screen and (min-width: 600px){
form {
width: 600px;
display:grid;
position: relative;
}
@media screen and (max-width:599px){
form{
display: inline;
width:100%;
position: relative;
margin : 0 auto;
}
}
}
Appreciate your help finding any issues with these new code snippets.

Hi Anupama,

It looks like you took the feedback and made some very specific changes based on it.
Unfortunately I can’t tell you if the new code is correct or if it will pass, because this is an assessment.

However, I do notice that you corrected how you associate labels and inputs, I see that you corrected a typo on “form”, and that you changed a width value from an integer to a percentage. You also changed one of your queries to “min-width” instead of “max-width”. These changes all make sense to me.

To check if your code is correct, definitely test it yourself in the browser before submitting. You can open the chrome dev tools and use the Inspect tab, and then play around with making your screen wider and narrower. Does the form width behave you way you would like it to?

Let us know if you have any more questions based on how your code behaves in the browser.
Jesse

Thanks a lot Jesse for reviewing my Assignment.

1 Like