Incomplete Suvery Form

1

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.
https://codepen.io/daniel555/pen/MdmaMo

2

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.

3

@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:

4

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.

Example:

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
5

@lasjorg, thanks for the advice. Here is my link https://codepen.io/daniel555/pen/MdmaMo
pls do give feedback.

6
  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
7

@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.
https://codepen.io/daniel555/pen/MdmaMo

8

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>
  </label>
</div>
<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>
  </label>
</div>
<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>
  </label>
</div>
1 Like
9

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

10

@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: