Learn-html-forms-by-building-a-registration-form - Step 56

HTML-CSS
1

Hey ya’ll,

very new to coding. So here is where I got stuck. It tells me to remove the min-height declaration from the input, textarea selector, but as far as I can tell, I did that already.

TASK:

Step 56

You want the select element to remain with a white background, but now it is not getting the same min-height as the input and textarea elements.

Move the min-height property and value so that all three element types have the same min-height value, and the select element still has a white background.

Code:

body {
  width: 100%;
  height: 100vh;
  margin: 0;
  background-color: #1b1b32;
  color: #f5f6f7;
  font-family: Tahoma;
  font-size: 16px;
}

h1, p {
  margin: 1em auto;
  text-align: center;
}

form {
  width: 60vw;
  max-width: 500px;
  min-width: 300px;
  margin: 0 auto;
}

fieldset {
  border: none;
  padding: 2rem 0;
  border-bottom: 3px solid #3b3b4f;
}

fieldset:last-of-type {
  border-bottom: none;
}

label {
  display: block;
  margin: 0.5rem 0;
}

input,
textarea,
select {
  margin: 10px 0 0 0;
  width: 100%; min-height: 2em}
}

input, textarea {background-color: #0a0a23; border: 1px solid #0a0a23; color: #ffffff}



.inline {
  width: unset;
  margin: 0 0.5em 0 0;
  vertical-align: middle;
}

ERROR:

Sorry, your code does not pass. Hang in there.

You should remove the min-height declaration from the input, textarea selector.

If someone could point out where I went wrong, it would be a big help.

Thank you all in advance!

2

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

3

missing semicolon after your last values of each selector.

4

You have one too many closing curly braces here.

Also, while it is best practice to have semi-colons at the end of every line, they are technically not needed for the last property in the ruleset, so those missing semi-colons are not an issue here.

1 Like
5

Thanks for the advice. Will do it that way from now.

6

It worked now without the extra curly brace. Thank you!

1 Like
7

I cannot get my code to validate either, here is what it looks like and the error message:

Sorry, your code does not pass. Hang in there.

You should move the min-height property and value to the input, textarea, select selector.

body {
  width: 100%;
  height: 100vh;
  margin: 0;
  background-color: #1b1b32;
  color: #f5f6f7;
  font-family: Tahoma;
  font-size: 16px;

h1, p {
  margin: 1em auto;
  text-align: center;
}

form {
  width: 60vw;
  max-width: 500px;
  min-width: 300px;
  margin: 0 auto;
}

fieldset {
  border: none;
  padding: 2rem 0;
  border-bottom: 3px solid #3b3b4f;
}

fieldset:last-of-type {
  border-bottom: none;
}

label {
  display: block;
  margin: 0.5rem 0;
}

input, textarea, select {
  margin: 10px 0 0 0;
  width: 100%;
  min-height: 2em;
}

input, textarea {
  background-color: #0a0a23;
  border: 1px solid #0a0a23;
  color: #ffffff;
}

.inline {
  width: unset;
  margin: 0 0.5em 0 0;
  vertical-align: middle;
}
8

You accidentally deleted the closing curly brace on the body ruleset.

In the future, please open a new topic using the Help button in the step instead of adding to one that is already sovled.

9

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.