Survey form issues

HTML-CSS
#1

Having issues getting the survey form right. I want to make it responsive so that it shrinks down to one column on mobile devices but I can’t get the media queries right. I would appreciate any assistance.

EDIT: Whoops, here’s the link: https://codepen.io/keaton85/pen/wgEevG

#2

why don’t you post your project so people can take a look and help you?

#3

would like to help…but you haven’t given us anything to work with? how about sharing ure codepen.io code :3

#4

You still have a two-column layout inside the media query. Also because you have explicitly placed the elements on the grid you have to place them again. The easiest code isn’t really the best solution, but I think it is OK to use it for this simple project.

  1. Move the media query to the bottom.

  2. Set grid-template-columns to use one column.

  3. Reset grid-column on all the children of the form element.

  4. Set justify-self to start on all the labels.

Because of specificity issues, we have to use !important, this should always be used sparingly. There is in 98% of all cases a better solution than using !important.

@media (max-width: 600px) {
  form {
    grid-template-columns: 1fr;
  }
  
  form > * {
    grid-column: initial !important;
  }
  
  form > label {
    justify-self: start !important;
  }
}

You have two typos in the CSS. Press the down arrow to the right of the CSS code box and select “Analyze CSS”. Correct the errors.

1 Like
#5