Build a Survey Form - confused


Hi, started work on “Survey Form”. Got into some troubles as you can see. No matter what i do i cannot make left column like i wanted. Im totally lost. What i imagined is that every item with “label” will be on left on proper “row” and corresponding element with survey form on right matching row. Probably i just forgot something form basic html/css but i searched for answer but to no avail. Please show me right way(point to proper tutorial would be nice).
Cheers
PM

I would have said you put each form inputs into a div box, but since you already placed an “id” attribute for each of them, you can style them by adding margins to

for example

#email {
margin-top: 5px;
}

Hi! You are using only one grid layout for the entire page, defined in your .container class. You could use one grid layout for your page, and another one within it for your form content. The template areas for your page container could be:

'header'
'form-content'
'footer'

Then you can have a div for your form-content that uses a grid layout with two colums, and in your HTML, for each line in your form, first put your label in a div, then your field in a separate div, eg.:

<div class="name-label"><label id="name-label" for="name">* Name: </label></div>
<div><input name="name" id="name" class="input-name" placeholder="Enter your name" required></div>

Part of what you have going on is that your grid is not doing what you think it is.

structure your elements like this:

			<div class="container"><!--NAME======-->
				<label class="label" id="name-label" for="name" >Name</label>
				
                 <input autofocus id="name" type="text" name="Name" required maxlength="50" class="input-field" placeholder="Please enter your name" >
			</div><!--END NAME-->

here both the label and the input are nested within a parent container. then you can use multiple methods to position the child items of that container. you could use floats, flex, grid or whatever you are most comfortable with.

hope this helps

2 Likes

Yea that helped, i redone whole thing. But now i have problems with spacing items on left (when i check it on small screen whole text just squeeze and everything looks messy - any way to stop it?)

| then you can use multiple methods to position the child items of that container. you could use floats, flex, grid or whatever you are most comfortable witth |
That helped a lot, i had impression that i cannot mix those things in one site.

Careful that you use the correct comment format, this // is not a CSS comment this is /**/, it can break your CSS.

If you had grouped your labels and input it would be super easy to switch to a one column layout and just stack everything. But the way you have grouped the labels and input into separate columns makes it kind of difficult.

Grid is great for page layouts. Flex is good for positioning items within each section of your layout. This video can help understand grid more.

Good job so far though!

for the font-size issue try this:

:root{
  font-size: calc(12px + (22 - 12) * ((100vw - 300px) / (1600 - 300)));}
/*fluid typography~ font size will be a calculated value between 12px and 22px depending on the viewport width*/

in that example the font size will be 12px on a 300px wide screen and automatically grow to a maximum size of 22px on a 1,600px wide screen.
This gives a much more fluid scaling of your font size than can be achieved by using media queries.

@ChrisCline1138
Used it in updated version. Looks interesting but text gets pretty big on typical desktop resolution so i changed max to 18. That formula is great, thanks.
@lasjorg
Yea commenting was tedious before i discovered crtl+/ for comment/uncomment in VSC. That helped a lot.

Updated my Survey challenge. Pretty bare-bones because i did not used any decorations(i dont really feel like doing it, im not the best in designing good looking ux). But im pretty happy with what i learned(responsiveness? of containers, how they correlate with each others and how “em” size works i i get it right 1em is basically 1 “default” font size space.).
Any tips and more tutorial videos/articles are always welcome. Thanks for all help.
Cheers