Survey Form- how to make it look good on mobile

[el15]

Hi, I made the survey form project but it doesn’t look great on mobile.
There is extra space on the right and the submit button isn’t centered.
I tried using overflow-x:hiden; to get rid of extra space and margin-right to center the button but it didn’t work.
Any ideas on how to fix this?
This is what it looks like:

codepen: https://codepen.io/cyberco15/pen/gORrwYz

Edit: I fixed those issues but it still doesn’t look good on mobile any feedback?

[zaklina]

 @media(min-width: 768px){
    .container{
      max-width: 720px
    }
  } 

;
I think your
overflow: hidden;
shuld be in the container
not in the body

[el15]

Ok, I added overflow to the container it’s a little better now.

But how do I center the form and get rid of the little gap on the left?

[zaklina]

I think when I added a litle bit of padding it was ok
be free to play around

[raven666]

you can fix it without media queries just using width and margin. The main problem is you are setting up the container at 100%, change to a value that is less than 100%, like 95% or whatever you like and horizontal margins to auto. Something like margin: 1em auto; You can add max-width too if you don’t want to grow too much on big screens.

Then focus on make responsive the elements inside, in that way the container will be consistent in all devices without media queries

[adramelech]

Don’t add unnecessary paddings and margins.

*{
  box-sizing:border-box;
  margin:0;
}

body{
    background-color: #fec5bb;
    font-family: 'Nunito', sans-serif;
}

.container{
    width:90%;
    max-width:800px;
    margin: 3.2rem auto 0 auto;
}

.form-input > * {
  margin-bottom:20px;
}

header{
    text-align: center;
    margin-bottom: 1.5rem;
    font-style: italic;
}

header #title{
    font-family: 'Lobster', cursive;
    margin-bottom: 0.1rem;
    font-style: normal;
}

#description{
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
    width:100%;
}

#survey-form{
    background-color: #fae1dd;
    padding: 2rem;
    border-radius: 0.3rem;
    box-shadow: 1px 1px 4px 1px #f8edeb;
    width: 100%;
}

.form-input{
    margin: 0.5rem 0;
    width: 100%;
}
#name, #email, #number, #comments{
  width:100%;
    border-color: lightpink;
    padding: 0.5rem 0.3rem;
    display: block;
}

.form-input-size{
    display:block;
    border-style: none;
    padding: 0.5rem 0.3rem;
    width: 80%;
}

p{
    font-size: 1.5rem;
}

.form-input label{
    font-size: 1.5rem;
    display: flex;
}

#submit{
    border-style: none;
    background-color: #fec5bb;
    display:block;
    color:white;
    width:90%;
    padding: 1em;
    margin: 2em auto;
    font-size: 100%;
}

#submit:hover{
    transform: translateY(-0.25em) ;
    cursor: pointer;
    box-shadow: 0 0.5em 0.5em -0.4em white;
}

@media(max-width: 576px){
    p{
        font-size: 15px;
    }

    .form-input label{
        font-size: 15px;
    }

  }
  
  

[el15]

Thanks a lot! Your solution worked.