Using media queries how to get a form to be the width of the screen & its labels/elements to be at full width when the screen is less than 600px wide?

Question

This is the code I wrote, but I'm not sure how to make it work.

@media screen and (width < 600px) {
.form {display:max-width;}

@media screen and (width < 600px) {
 div {
    display:max-width;
  }

I chose div because all form labels/inputs/elements are inside of divs.

Answer 1

@media only screen and (max-width: 600px) is the rule you looking for. Media queries don't use < or > conditions but max- and min-

Then you should combine bot rules. max-width is not a legit value (especially not for the display property). Simply use auto to occupy all available space.

Last but not least, by sizing the div at the max available width you will not size the containing elements to be the same width. YOu need to specifically set them to width: auto

@media only screen
  and (max-width: 600px) {
    .form,
    div > * {
      width: auto;
    }
}