Survey Form - nothing is working!

Survey Form - nothing is working!
0

#1

Tell us what’s happening:
Hi, I’ve been trying my best to match the layout of the Survey Form project, but I don’t know what else to do. I’ve been constantly searching for solutions to my problem, but none of them seem to work.

My problem is: I feel good about my layout, and positioning, along with the container and background. Where I am getting stuck is trying to get all the form information aligned properly just like the sample page FreeCodeCamp has for the Survey Form. How the text is perfectly aligned on the left with a small gap in the middle and the fill-out stuff to the right of it. But nothing! I’ve used ‘inline-block’ along with several elements, and still no luck. At this point, I’m convinced I didn’t use the correct Classes for the divs.

Please send help!

Your code so far

<!DOCTYPE html>
<html>
<head>

	<title>Survey Form Page</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="styles.css">
	<link href="https://fonts.googleapis.com/css?family=Nanum+Gothic" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">

</head>

<body>
  <div id="container">
	<h1 id="title">Survey form</h1>
	<div id="description">
		<p>We'd like to hear your feedback in your stay!</p>
	</div>

	<form id="survery-form" action="https://en.wikipedia.org/wiki/Thank_You" method="GET" target="_blank">

<!-- name start-->
	<div class="rowTab">
		<div class="labels">
			<label id="name-label" for="name">Name:</label>
		</div>
		<div class="rightTab">
			<input autofocus type="text" name="name" id="name" class="input-field" placeholder="Enter your name" required>
		</div>
	</div>
<!-- name end -->

<!-- email start -->
	<div class="rowTab">
		<div class="labels">
			<label id="email-label">Email:</label>
		</div>
		<div class="righTab">
			<input type="text" name="email" id="email" class="input-field" required placeholder="Enter your email" required>
		</div>
	</div>
<!-- email end -->

<!-- age start -->
	<div class="rowTab">
		<div class=labels>
			<label id="age-label">Age:</label>
		</div>
		<div class="rightTab">
			<input type="text" name="age" id="number" min="1" max="125" class="input-field" required placeholder="Enter your Age">
		</div>
	</div>
<!-- age end -->

<!-- stay start -->
	<div class="rowTab">
		<div class="labels">
			<label  id="stay-label">What option best decribes your stay?</label>
		</div>
		<div>
			<select id="dropdown" class="dropdown" name="stay" size="1" required>
				<option>Please select one</option>
				<option value="sucked">Our stay here sucked</option>
				<option value="alright">Alright for the most part</option>
				<option value="great">It was great</option>
				<option value="loved">I FREAKIN' LOVED IT!</option>
			</select>
		</div>
	</div>
<!-- stay end -->

<!-- recommendation start -->
	<div class="rowTab">
		<div class="labels">How likely is that you would recommend Turtle Resort?
		</div>
	</div>
	<div class="rightTab">
		<ul>
			<li class="radio"><label>Definitely<input name="radio-bottons" value="1" type="radio" class="userRatngs"></label></li>

			<li class="radio"><label>Maybe<input name="radio-bottons" value="2" type="radio" class="userRatings"></label></li>

			<li class="radio"><label>Not sure<input name="radio-bottons" value="3" type="radio" class="userRatings"></label></li>
		</ul>
	</div>
<!-- recommendation end -->

<!-- improvements start -->
	<div class="rowTab">
		<div class="labels">
			<label class="preferences">Things that should be improved in the future<br>(Check all that apply):
			</label>
		</div>
	<div>
		<ul id="preferences">
			<li class="checkbox"><label><input type="checkbox" name="improvements" value="1">Parking</label></li>
			<li class="checkbox"><label><input type="checkbox" name="improvements" value="2">Bathrooms</label></li>
	      	<li class="checkbox"><label><input type="checkbox" name="improvements" value="3">Amenities</label></li>
	      	<li class="checkbox"><label><input type="checkbox" name="improvements" value="4">Free Wi-Fi</label></li>
			<li class="checkbox"><label><input type="checkbox" name="improvements" value="5">Accommodations</label></li>
			<li class="checkbox"><label><input type="checkbox" name="improvements" value="6">Daily Housekeeping</label></li>
			<li class="checkbox"><label><input type="checkbox" name="improvements" value="7">Furniture and linens</label></li>
			<li class="checkbox"><label><input type="checkbox" name="improvements" value="8">Rolling Check-in/out</label></li>
			<li class="checkbox"><label><input type="checkbox" name="improvements" value="9">24/7 Customer Service</label></li>
			<li class="checkbox" class="checkbox"><label><input type="checkbox" name="improvements" value="10">Hotel Planning & Bookings</label></li>
		</ul>
	</div>
	</div>
<!-- improvements end -->

<!-- comments starts -->
	<div class="rowTab">
		<div class="labels">
			<label class="comments">Any Comments or Suggestions?
			</label>
		</div>
		<div>
			<textarea class="textarea" rows="5" cols="50">Enter your comment here...
			</textarea>
		</div>	
	</div>
<!-- comments end -->

<!-- submit button start -->
	<div class="submit">
		<input type="submit">
	</div>
<!-- submit button end -->
</form>
</div>
</body>
</html>

* {
	margin: 0;
	padding: 0;
}

body {
	text-align: center;
	background-image: url('https://images.pexels.com/photos/1167021/pexels-photo-1167021.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940');
	background-position: center;
	background-repeat: no-repeat;
	background-size: auto;
	font-family: 'Nanum Gothic', sans-serif;
	font-size: 1.2em;
}

#container {
	background-color: #fff;
	background-position: relative;
	border-radius: 5px 5px;
	max-width: 100%;
	max-height: 1000px;
	margin: 2% 20%;
	padding: 50px;
	opacity: 0.7;
	z-index: 1;
}

#title {
  font-family: 'Montserrat', sans-serif;
	font-size: 2.5em;
	padding-top: 3.5px;
	padding-bottom: 10px;
}

#description {
	padding-bottom: 100px;
}

#description p {
  border-bottom: 1px solid #D3D3D3;
  padding: 40px;
}

li {
  list-style-type: none;
}

.textarea {
	width: 100%;
	outline: none;
	resize: none;
	width: 80%;
	height: 80%;
}

Your browser information:

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

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-survey-form


#2

Since you have provided the codepen link, it was not necessary to provide the full code here.

You can look at this example so you would get an idea as you desire,


#3

Hi @Sujith3021,

Its all practice really. Here is a site with really good explanations on common web development practices.

It has everything from flex box to typography. I recommend the box model tutorial.


#4

I’ve edited your post 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 easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

When you have a situation where you need to post so much code, it is best just to post a link to a Codepen instead.


#5

Thank you for your response! I am altering my whole page now since it seems like you have used ‘display: flex’ instead of inline-block. After I attempted it, the page just didn’t respond accordingly everything wasn’t inline and I couldn’t find the correct selector and property to make it work. After hours of frustration, I decided to scrap my project and start over. Meanwhile, I am taking some of your recommendations and hopefully I can implement the styles on section at a time.

current progress:


#6

Awesome, I probably should refresh my mind with some good practice on positioning and box model. Appreciate the recommendation - cheers!