Anyone please solve this?

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

   **Your code so far**

/* file: index.html */
<!DOCTYPE html>
<html>
 <head>
   <title>Registration Form</title>
	  <link rel="stylesheet" type="text/css" href="styles.css" />
 </head>
 <body>
   <h1>Registration Form</h1>
   <p>Please fill out this form with the required information</p>
   <form action='https://register-demo.freecodecamp.org'>
     <fieldset>
       <label>Enter Your First Name: <input type="text" name="first-name" required /></label>
       <label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
       <label>Enter Your Email: <input type="email" name="email" required /></label>
       <label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
     </fieldset>
     <fieldset>
       <label><input type="radio" name="account-type" class="inline" /> Personal Account</label>
       <label><input type="radio" name="account-type" class="inline" /> Business Account</label>
       <label>
         <input type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
			  </label>
     </fieldset>
     <fieldset>
       <label>Upload a profile picture: <input type="file" name="file" /></label>
       <label>Input your age (years): <input type="number" name="age" min="13" max="120" />
			  </label>
       <label>How did you hear about us?
         <select name="referrer">
           <option value="">(select one)</option>
           <option value="1">freeCodeCamp News</option>
           <option value="2">freeCodeCamp YouTube Channel</option>
           <option value="3">freeCodeCamp Forum</option>
           <option value="4">Other</option>
         </select>
       </label>
       <label>Provide a bio:
         <textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
			  </label>
     </fieldset>
     <input type="submit" value="Submit" />
   </form>
 </body>
</html>

/* file: styles.css */
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;
}

fieldset:not(:last-of-type) {
 border-bottom: 3px solid #3b3b4f;
}

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;
}

input[type="submit"] {
 display: block;
 width: 60%;
 min-width: 60%;
 margin: 1em 1em;
 height: 2em;
 font-size: 1.1rem;
 background-color: #3b3b4f;
 border-color: white;

}


   **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36

Challenge: Step 54

Link to the challenge:

2

You’ve set min-width to 60% but the instructions say to never let the width go below 300px.

The original margin was: margin: 0 auto

Do you understand what the 0 and auto are doing? You’ll need to understand this before you can set the top and bottom margin to 1em.

1 Like
3

I think -(margin: 0 auto; 0 mean “top” and auto mean “bottom”)
am i right?

4

Not quite. Remember, there are four different margins you can set: top, right, bottom, left. The margin property always sets all four of these. Since margin: 0 auto only has two values in it I think it’s a safe bet that one of those numbers is setting two of the margins and the other one is setting the other two.

1 Like
5

Please tell me, where should I change here?
input[type=“submit”] {
display: block;
min-width: 60%;
margin: 1em 1em;
height: 2em;
font-size: 1.1rem;
background-color: #3b3b4f;
border-color: white;

}

6

You are correct that you want to set a min-width, but you have the value wrong. Remember, you don’t want the width to go below 300px.

You already have the margin property, you just need to change the values so that the top/bottom margin is 1em and the right/left margin stays at auto.

1 Like
7

should i change the min-width value 60%?

8

What is the purpose of min-width? What value do the instruction say the width of the button should never go below?

9

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