Product Landing Page Form Section

Hi, I am having trouble aligning my labels and inputs on my form. I did have the label on left and the input fields on the right but I changed something in CSS and can’t get it back. I did ctrl z a bunch of times and still can’t get it back.

How can I have the labels on the left and on the right the inputs? Also I want the left edge and right edge of the two input fields to both line up. That is what I originally was having trouble with.

Besides that the only other thing I want to change is the way my site navigation links go to the sections. I added margin so my sections weren’t hidden behind my navbar. It works for the top two sections but not the bottom ones. Any tips for that?

My codepen: https://codepen.io/danh4648/pen/joLxBb

CSS Grid is pretty nice to do some quick form alignment with.

form {
  display: grid;
  grid-template-columns: min-content max-content;
  justify-content: center;
  grid-gap: 20px;
}

label {
  justify-self: start;
}
/* Remove the margin-top on the inputs */
#email {
/*   margin-top: 20px; */
}

#comments {
/*   margin-top: 20px; */
}

#submit {
  margin-top: 20px;
  width: 100px;
  height: 30px;
  grid-column: 1 / span 2;
  justify-self: center;
}

Not sure about your last question, what is the problem?

1 Like

That worked great! Thanks a lot.

For second question; when I click “about” or “tune-up” link it goes to that section and lines up just below the nav bar. But when I click “video” or “contact” it doesn’t correctly line up like the other sections.

Also, all the text on the page currently spans the whole width of page. I’d like to make it not go as far to the sides. Do I just set the width of the body of page?

I can change the width of all the text by setting the width to a percentage or px but it puts everything to the left side of page, even with text-alignment set to center.

Also, if I want to make the labels on top of the inputs on the form to see how it would look, how could I do that with the grid?

I also tried putting a different color around the form by setting a background color which took the whole width of screen. I set to a px but it put the whole form to left side of screen. I wanted it to stay in center.

A margin is more typical for this sort of thing. To make things nicer on both narrow and wide displays, I like to set that margin as a percentage of view width. For example:

   body { margin: 15vw; }
1 Like

Worked like a charm. I used margin: 0 15vw 0 15vw; so it didn’t effect margin below or above.

Awesome. BTW, for most cases I recommend a media query for very narrow widths (320 px is good) that eliminates the margin entirely.

1 Like

Ahh okay. The media query is the last thing I have to do once I get the page looking the way I want.

I got the background color around the form the way I wanted it using margin also.

The last thing I want to try to do is put the labels on the form above the inputs to see how it looks. How can I do this?

Something like this:

<label for="foo">Some Label</label>
<input id="foo" type="text">

Then use either flexboxes with flex-direction: column or block rendering to put them on separate lines. The former is more powerful (gives you alignment for one), the latter is simpler. For example:

   input, label { display: block; }

Is there a way to do it using the grid I am using now?

Possibly (I’m not all that experienced with CSS grid), but AFAIK not all that elegantly. CSS grid tends to be better for fixed layouts, not ones with variable numbers of rows.

Okay I may just leave it the way it is with grid for now and work on it later.

The last thing I am trying to change is when I resize window, the background color of the form does not contain all the form fields anymore. Is there a way to link them to resize together?

I’ve found that styling the form tag doesn’t always work as expected. Try putting the whole form inside of a div then style the background of that.

1 Like

That does work better. The background stays outside of all the form elements. There is a weird issue now where the corners get cut out when resizing but may be something to do with margins. I will play around with it.

  1. The id attribute value has to be unique, you have given the form container div the same id as the form.

  2. To stack the form change the grid-template-columns to use one column and set the label and submit input back to its default.

@media screen and (max-width: 860px) {
  #form {
    padding: 0 15px 0 15px;
    grid-template-columns: 1fr;
    justify-content: center;
  }
  #submit {
    grid-column: unset;
  }
  
  label {
    justify-self: unset;
  }
}
1 Like