Please how can i fix this issue?
please provide us with your code so we can assist you
1 Like
I don’t know how to paste the code here, it keeps on reducing
place your code between backticks like this:
```
YOUR CODE HERE
```
or use this:
and it will do the same for you.
<!DOCTYPE html>
<html>
<head>
<title>
Survey Form
</title>
</head>
<style>
.background{
background-color: rgb(62, 173, 90);
}
h2{
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}
.form{
background-color: white;
width: 30%;
margin: auto;
padding-left: 20px;
padding-top: 20px;
padding-bottom: 40px;
font-family: Arial, Helvetica, sans-serif;
}
.input{
padding: 10px 65% 10px 5px;
margin-top: 8px;
}
#option{
padding: 10px 75% 10px 5px ;
border-bottom: 2px solid;
}
#comment{
padding: 10px 58% 10px 5px;
margin-top: 8px;
}
.submit{
padding:5px;
width: 94%;
margin: auto;
background-color: rgb(62, 173, 90);
border: none;
border-top: 1px black solid;
}
*{
margin-top: 10px;
}
</style>
<body class="background">
<h2>GeeksforGeeks Survey Form</h2>
<section class="form">
<form >
<label for="name">Name</label>
<br>
<input type="text" id="name" placeholder="Enter your name" class="input">
<br>
<br>
<label for="email">Email</label>
<br>
<input type="email" id="email" placeholder="Enter your email" class="input">
<br>
<br>
<label for="age">Age</label>
<br>
<input type="number" id="age" placeholder="Enter your age" class="input">
<br>
<br>
<label for="option">Which option best describes you?</label>
<br>
<select id="option">
<option value="student" >Student</option>
</select>
<br>
<br>
<label for="select">Would you recommend GeeksforGeeks to a friend?</label>
<br>
<input type="radio" id="Yes" value="Yes" name="select">
<label for="Yes">Yes</label>
<br>
<input type="radio" id="No" value="No" name="select">
<label for="No">No</label>
<br>
<input type="radio" id="Maybe" value="Maybe" name="select">
<label for="Maybe">Maybe</label>
<br>
<br>
<label for="check">Languages and Frameworks known(Check all that apply)</label>
<br>
<input type="checkbox" id="c" value="c" name="check">
<label id="c">C</label>
<br>
<input type="checkbox" id="c++" value="c++" name="check">
<label id="c++">C++</label>
<br>
<input type="checkbox" id="c#" value="c#" name="check">
<label id="c#">C#</label>
<br>
<input type="checkbox" id="java" value="java" name="check">
<label id="java">Java</label>
<br>
<input type="checkbox" id="python" value="python" name="check">
<label id="python">Python</label>
<br>
<input type="checkbox" id="javascript" value="javascript" name="check">
<label id="javascript">JavaScript</label>
<br>
<input type="checkbox" id="react" value="react" name="check">
<label id="react">React</label>
<br>
<input type="checkbox" id="angular" value="angular" name="check">
<label id="angular">Angular</label>
<br>
<input type="checkbox" id="django" value="django" name="check">
<label id="django">Django</label>
<br>
<input type="checkbox" id="spring" value="spring" name="check">
<label id="spring">Spring</label>
<br>
<br>
<label for="comment">Any comments or suggestion</label>
<br>
<textarea id="comment" rows="3" cols="25" ></textarea>
<br>
<br>
<input type="submit" value="submit" class="submit">
</form>
</section>
</body>
</html>
I have done it, please what is the error?
I think the problem is in your CSS styling.
In your .form selector you applied this:
width: 30%
which makes the width of your form takes only 30% of the screen’s total width. that’s why it appears very small. You can change it for a higher percentage and see the change.
Also, in your .input, #option and #comment selectors you have a percentage value in your padding:
.input{
padding: 10px 65% 10px 5px;
...
}
This percentage means that the right-padding will be 65% of the width of the containing element. Which will be very wide as you see. You can change it for px values like your other values or try lower percentage value and choose what you prefer.
one last thing, if you tried to resize your <textarea> element you will see that you can resize it as you want and make it very big, you can prevent this to only a specific maximum width by using max-width in your #comment selector and give it for example a value of 95% or any value you want.
Okay thank you, I will try it out