HTML/CSS Labels and form elements

Learning Challenge

Question

What I’ve tried

Screenshots

when the width is over 600px my input fields seems to not stretch as far as I thought they should, am I missing something here or am I over thinking this?

Hi, I’m not sure if this will work because I’m still trying to figure it out myself haha. But try adding this to your css and see if it works

textarea, select, button, input {
    width: 100%;
    max-width: 600px;
}

I also have been having trouble with this, so for the last 4 points for the HTML assessments

  • 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

this was the code I came up with on CSS. The only thing is when its 600 px it sort of intrudes on the form; but I thought I covered it in the CSS Code. I just wanted to make sure this was right, and I don’t waste a try for an assessment. Maybe @bryanray could clarify how to solve this step.

@media screen and (min-width: 600px){
    form{
      max-width: 600px;
      display: grid;
      grid-template-columns: 600px;
    }
  }
  form{
      max-width: 600px;
  }
  
  label, textarea, select, button, input{
    width: 100%;
    max-width: 600px;  
}

Here is how it looks when the screen is 600 pixels.

1 Like

If we look at your CSS …

This CSS is saying … “only when the screen is at 600px or less will I apply these styles” …

This means that when your browser goes above 600px … you lose the “100%” width on all your input, textarea, button, etc elements …

You’ll most likely want to apply those styles all the time and not only when the browser is below 600px.

Hope that helps! Please let us know if you have any more questions. :+1:

so I guess my question is this “* … is 600px wide when the screen is greater than or equal to 600px wide” and my css is stating to only be 600px wide when its over equal or greater to 600px. I’m just worried because I’m being super cautious about this and I’ve seen others where theirs were way over 600px when the screen was over 600px.

I may have answered my own question with that response, I’ve just now realized that there is no specific call out for the size of the inputs when its =< to 600px

Correct. You can just have the inputs always be 100%, because they are inside the form element.

This really terrible picture I put together may help? Also note, those aren’t all input's … just meant to represent the things inside the form.

Thank you for the help! One last question, its says label and form elements, how would that work because when I do put label to 100% nothing happens? I feel like I’m skirting the edge of blatantly asking for the answer’s but I guess what I’m really asking is that is the label supposed to be affected like the rest of the elements?

@bryanray so would you say that my code looks good to you?

If you use the Developer Tools and “inspect” the label element. You should see it spanning all the way across the form.

Did you adjust your CSS to span the elements in the form all the time? Could you take a couple screenshots for me to see?

Hey Bryan,

So I removed the max-width part, and just made the label etc all have a 100% width.

But at 600 px it looks like my screenshot I attached its very close to the edge.

1 Like

What does your UI look like when the browser window is more than 600px wide? Does your form have a clear “stop” at 600px?

It looks like it continues till its 605 px, though I am not sure why, I don’t have any padding or margins.

Here is one at 605 and 700 pixels.

Agreed. Just glancing at the screenshots it does look like some of the form fields are just a bit off for some reason.

Would you mind posting the content of your CSS in a private gist? Perhaps I can spot something.

After digging through the assessment code, it doesn’t appear that we take that into account. So you should be good (as far as the 600px and form elements go)!

However … you being the inquisitive awesome student that you are, here is a little more detail for you! :smile:

The fix for that issue is what is known as a “box-sizing” … what is happening, in the case of your form inputs … is that the margin, padding, and border of the elements are all effecting the overall width of the element. This is the browsers default implementation … which a lot of libraries, developers, and people out there do not agree with, but are probably there for backwards compatibility purposes. But I digress …

If you want to “fix” that issue you should be able to add something like this to your CSS:

form * {
  box-sizing: border-box;
}

This style will apply the “box-sizing” to all the elements in your form(s). If you wanted fix this globally for every element … you could do something like:

* {
  box-sizing: border-box;
}

In fact, a lot of CSS styling libraries (Bootstrap, Zurb, Material UI, etc) will actually do this as the default.

Anyways … just some information for your brain to store away! :brain: :smile:

Hope that helps!

1 Like

Brilliant thanks Bryan!

1 Like

Hope to see that passing submission soon! :clap: :smile: