Im creating a div for the form. and then I want to put h1 OVER it. but it just vanishes then (so its basically behind it?) Also cant I use flexbox in codepen.io?
Why cant I position a div with display:flex; >justify-content: center; ? do I always have use that code (.center div) to make it center in the middle? I thought I could just juse display: flex; (to use the flexbox)
and the justify-content: center; but it doesnt work? why is that?
make sure you close your tags and I put the header in a div stick the below code in your body and take a peek. I put line breaks after each input feild to get them below each other. What else did you want to do?
<h1> A Survey Form </h1>
<p id="description"> Let us know how we can improve freeCodeCamp </p>
<label id="name-label" for="name">* Name: </label>
<input type="text" id="name" placeholder="Enter your name" required><br>
<label id="email-label" for="email">* Email: </label>
<input type="text" id="email" placeholder="enter your mail"><br>
<label id="age-label" for="age">* Age: </label>
<input type="text" id="email" placeholder="Enter your Age"><br>
If you want a fun and easy way to learn about flex (and I know it’s gonna sound silly, but it helped me a LOT!)…
So the first thing I did, in trying to see this, was to try for something I could see a little better. In order to achieve that, I changed the width of the surveyForm element from a fixed pixel width, to a more responsive one. I used width: 60vw; just because I could.
Second, your labels/inputs are wrapped in a div.labels, so that’s where your flex would need to be attached. Here’s what I used, and it works pretty well:
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.
You really need to clean up your html. You have to make sure to close all your tags, otherwise you are going to have all kinds of unintended consequences.
Also break things into pieces. That’s the benefit of containers.