App Academy

Learning challenge quick fix

Learning Challenge

HTML/CSS Assessment

Question

I finished my assessment and turned it in and I got one thing wrong in my report which I’m not sure how to fix. I get told I did not properly code the CSS to have the form element be as wide as the window when the window is narrower than 600px.
*has a ‘form’ element that is as wide as the window when the window is narrower than 600px

What I’ve tried

Screenshots

image

This is the last screenshot, I can provide more if needed

Hi,
I can see that you are setting a max-width on your form element in the first screenshot. That basically says that the width cannot go over 600px. But I do not see you defining the width of the form anywhere else. Take a look at this documentation to explore how you can set the width, in addition to the max-width of the form.

Jesse

How would I go about defining the width of the form? In HTML or in CSS? Sorry this part has me a bit confused even after looking at the documentation.

Hi Akash,
You can define a form’s width using CSS in a similar way that you defined the max-width.

For example, you already have:

form {
  max-width: 600px;
}

You can add a width attribute in there as well, in addition to the max-width attribute that you already have. The width can be set to a number of pixels, a percentage, auto…the documentation can help you see some of these options.

Jesse

1 Like

Like this correct? Since form { } is the only one that did not have a width attribute. Would I be clear to submit as this?

Yes, setting the width and max-width on the form element is a great way to go. You can take care of the width requirement using only CSS for the form element, without using media queries.

I can’t tell you if it is correct or not, since it is an assessment, but check out the behavior in the browser, and if the form seems to respond to the different screen sizes, you should be all set.
Jesse

Would this be considered as wide as the window on the left? I added the width to the CSS like you suggested but I’m not sure if this is how it is supposed to look like.


And here is the original

From the static images, that looks pretty good to me. If you start with a super-skinny window and start moving it outwards, you should see the form get wider until a certain point (which is 600px), and then stay that exact width as you continue to drag the window wider. If that’s what you are seeing, then it is working as it should be!

Ohh thank you so much! I was confused as to how to see the change happening which made me hesitant to submit but you cleared it all up for me.

1 Like