Need help to make the survey form mobile responsive

1

Hi
I am on the survey-form challenge and trying to make the form mobile responsive.
Need help to make it responsive.
here’s the link:https://codepen.io/samre247/pen/GbmKve?editors=1100

Thanks

2
  1. Give the input width 100% and a max-width
/* removed the other CSS for brevity */
.input-field {
  width: 100%;
  max-width: 280px;
}
  1. Move the last breakpoint up to say 540px and set the floated elements to be display: block so they stack.
@media screen and (max-width: 540px) {
  #form-outer {
    width: 100%;
  }
  .rightTab {
    width: 100%;
    display: block;
  }

  .labels {
    width: 100%;
    display: block;
    text-align: left;
  }
  /* CSS remove it was already set in the 820px media query */
}
  1. This select style is not being applied here because of specificity, you need to use the #dropdown id.
@media screen and (max-width: 833px) {
  .input-field {
    width: 100%;
  }
  /* use the #dropdown as the selector */
  select {
    width: 100%;
  }
}

This will be far from perfect, but it’s a start.

Just as an aside, I would really suggest ditching floats and using more modern layout techniques (flexbox/css grid).

3

Thank you so much.
I will try to use the flexbox/css techniques in the upcoming projects.
I did the tutorials but forgot most of them.will try learning them again.
thanks

4

No problem.

The basics of flexbox are pretty simple and cause much fewer issues then using floats do. I think you will pick it up pretty fast once you start to use it (resources). The documentation can be a little heavy and make it seem more complicated than it really is (mostly).

5

Thanks for the resources, these are really good.