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?
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:
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:
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?
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.