Content Input bar

HTML-CSS
1

I need help in trying to adjust the content bar of my Age form input. If you follow the link you can see where it doesn’t line up with the others above it. The word age doesn’t need to line up just the input bar.

2

Wow. Okay, so that needs some work. First, each input shouldn’t be in its own form. Second, each input should have a label, rather than having a p tag. Third, you can style them at the form level.

Try this:

// in your CSS
form {
  display: grid;
  grid-template-columns: 33% auto;
}
// and in your HTML

    <form>
      <label for="name">Name:</label><input type="text" id="name" />
      <label for="email">Email:</label><input type="text"  id="email" />
      <label for="age">Age:</label><input class="age" type="text" id="age" />
  </form>

Note that I didn’t style the labels or inputs at all. I simply told the form to display as a grid, and to set up two columns: one 33%, and one the rest of the width.

That wasn’t to say “do it this way” – this was simply a suggestion on presentation. But don’t make each input in its own form, that just won’t work. Like, at ALL.

1 Like
3

thank you this helps a lot

4

To add to that.

  1. Both the opening and closing h1 tags are missing the closing angle bracket > (or greater than).
  2. The h2 element is missing the closing tag.
  3. Both elements are empty and as such serves no purpose.
<h1 id="Gamer"</h1
<h2>

<h1 id="Gamer">Some content</h1>
<h2>Some more content</h2>

You forgot the second column in the grid (grid-template-columns: 33% auto).

Edit: You may also want to add this to your background image.

  background-size: cover;
  background-repeat: no-repeat;
  height: 100vh;
  overflow-x: hidden;

And then remove the height:100% on the div

1 Like