Incomplete Suvery Form

Hi all,
I’ve completed the survey form project with all objectives done. However, I can’t managed to get the responsive work. Pls kindly advise me. below is the link.

Removing margins and paddings to your input boxes will help you scale them down on mobile devices.

Or give box-sizing: border-box; Which calculates padding and and borders as part of its total width.

@shimphillip, thanks for the advice. It works by using ‘‘box-sizing: border-box;’’
However, I have problem aligning the age input to be aligned with the name and email input.:sweat_smile:

You might try making the labels a flex container and then give the inputs margin left auto. You will likely have to make a class for this so it doesn’t affect all the labels/inputs. It’s also going to affect the CSS in the media query so you need to rejigger things.


label {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  max-width: 360px;

.input-field {
  height: 20px;
  width: 280px;
  padding: 15px;
  margin: 10px 10px 10px auto;
  box-sizing: border-box;
  border: 1px solid #c0c0c0;
  border-radius: 5px;
1 Like

@lasjorg, thanks for the advice. Here is my link
pls do give feedback.

  1. Center the form elements, one way to do it is giving it a max-width and margin left/right auto.
#survey-form {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  1. Stack the form at some point, you can switch the labels to use flex-direction: column. One change you will also have to make is for the #dropdown select element. The hight you have set on it will cause an overflow when stacking the form, use padding instead.
#dropdown {
  text-align: left;
  padding: 10px 0;
  width: 100%;
@media screen and (max-width: 520px) {
  label {
    flex-direction: column;
  1. Remove the default padding on the ul for the checkbox group and move the list-style: none inline style to the #preferences selector.
#preferences {
  list-style: none;
  padding: 0;
  1. Increase the font size a bit on the body and give the submit button some padding also give it cursor: pointer; I’d also give the #form-outer some more top/bottom padding.
1 Like

@lasjorg, thanks for the kind advice. Though I don’t really quite understand the reasons for all the alterations, but I somehow got it done and I hope in time to come, I can fully understand CSS and fully make use of it. May you pls feedback on it.

If you have a question about the CSS feel free to ask.

Line 15: You are missing the %
Line 63: It should be align-items: center;

The alignment is a little off for the labels now, I might just get rid of the * and do Name: etc.

To give the label text a bit more room you can “cheat” a little and add the space HTML entity  

<div id="Name">
  <label for="name" id="name-label">Name:&nbsp;
    <input type="text" placeholder="Enter your name" name="name" id="name" class="input-field" required>
<div id="Email">
  <label for="email" id="email-label">Email:&nbsp;
    <input type="email" id="email" placeholder="Enter your email" name="email"class="input-field" required>
<div id="Age">
  <label for="age" id="number-label">Age:&nbsp;&nbsp;
    <input type="number" placeholder="Age" id="number" name="age" min="1" max="100" class="input-field" required>
1 Like

@lasjorg, wow awesome. I got it all done with your guidance. Thanks a lot.

@lasjorg, but I don’t really understand the reason behind it. Just merely follow your advice and somehow or other get a bit understanding of it.:sweat_smile: