Hey so baisicaly i was wanting to know how do you make the additional comments section / textarea section the same vw width as the bottom border lines? i have completed the project and just wanted to continue to test and learn the basics but couldnt figure out how to change the length of the textarea. I know i could use row and col but this isnt adjusted to different vw right?
<!-- file: index.html -->
<!DOCTYPE hmtl>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Survey Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 id="title">Survey Form</h1>
<p id="description">Please fill out the survey form :)</p>
<!-- form -->
<form id="survey-form">
<fieldset>
<label id="name-label"> Fill in your name
<input id="name" type="text" placeholder="Name" required/>
</label>
<label id="email-label">Fill in your email
<input id="email" type="email" placeholder="Email" required/>
</label>
<label id="number-label">Fill in your age
<input id="number" type="number" min="18" max="150" placeholder="Age" required/>
</label>
</fieldset>
<fieldset>
<select id="dropdown">
<option>Select Gender</option>
<option>Female</option>
<option>Male</option>
</select>
</fieldset>
<fieldset>
<label> Favourite color
<input type="radio" value="1" name="Favourite-color"> Blue</input>
<input type="radio" value="2" name="Favourite-color"> Red</input>
<input type="radio" value="3" name="Favourite-color"> Green</input>
<input type="radio" value="4" name="Favourite-color"> Orange </input>
</label>
</fieldset>
<fieldset>
<label>Favourite season
<input class="inline" type="checkbox" value="1">Summer</input>
<input class="inline" type="checkbox" value="2">Winter</input>
<input class="inline" type="checkbox" value="3">Autumm</input>
<input type="checkbox" value="4" class="inline" >Spring</input>
</label>
</fieldset>
<fieldset>
<label class="ac"> Additonal Comments</label>
<textarea placeholder="Comments" rows="3" cols="30" ></textarea>
<label>
</fieldset>
<input type="submit" value="Submit" />
</form>
</body>
</html>
/* file: styles.css */
body{
width: 100%;
margin: 0;
background: linear-gradient(black, rgb(82, 82, 82), rgb(145, 142, 142));
color: #f5f6f7;
font-family: Palatino ;
font-size: 16px;
}
h1, p{
text-align: center;
margin: 0.5rem auto;
}
form{
width: 60vwl;
max-width: 500px;
min-width: 300px;
margin: auto;
padding: 2em;
}
fieldset{
padding: 1.5em 0;
border: none;
border-bottom: 3px solid #e5e3d9;
}
label{
display: block;
margin: 0.5rem 0;
}
input, textare, select{
width: 100%;
}
.ac{
text-align: auto;
}
input[type="submit"] {
display: block;
width: 60%;
margin: 1em auto;
height: 2em;
font-size: 1.1rem;
min-width: 300px;
}
fieldset:last-of-type{
border-bottom: none;
}
textare {
width: ;
min-height: 2em;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36
Challenge Information:
Survey Form - Build a Survey Form