Help with Responsive Design on Survey Form

I tried to duplicate the Survey Form example as much as possible. It looks good on a desktop, but when I shrink the screen everything overflows and looks terrible. How do I make this website responsive? Here is my code: https://codepen.io/rrichetto/pen/RBoLEO

One of the best ways to create responsive layouts is to use a framework such as bootstrap, bulma or turret.css. Now, if you don’t feel that your knowledge is up to that yet that’s fine, just know that these frameworks can take a lot of the heavy lifting away for the designer and make things easier.

I played a little bit with your css to do a bit of testing (on my smartphone). Look at the width of your main section and try making that a bit wider (say 75%?)

You need to add in css something like:

@media (max-width: 576px){
  main {
    width: 85vw;
  }
  #container {
    grid-template-columns: 1fr;
  }
  .label-side {
    justify-self: start;
    text-align: left;
  }
  .input-side {
    justify-self: start;
    padding-left: 4em;
  }
}
1 Like

Works great, thanks!