Need help about building a survey form

HTML-CSS
1

hi
i want to make labels absolute sizes even if resolutions are different person to person and make page centered doesn’t matter what users’ screen resolution are. also want to make place texts to left and labels to right.

thank you.

my codepen

2

if your form is fixed you can center it using left or right. The width is 75% so left or rigth: 12.5%; will center it (100%-75%)/2= 12.5%. The problem whit the position fixed is that if your form is bigger than the size of the viewport you will not be able to scroll down, actually i cant do it in your pen. So better let the form display: block; and use margin: auto or margin: x auto; x is the margin top and bottom. To center the h1 block use text-align: center;

For the labels to the left input text to the rigth

Put the input inside the label

<div>
   
    <label id="name-label">Name: <input id="name" required placeholder="Full name"></label>
    
    
  </div>

make the label a flexbox

label {
    float: inherit;
    font-size: 20px;
    margin: 10px 0 10px 0px;
    display: flex;
    align-items: flex-start;
    width: 100%;
}

give some margin to the input to separate it from the text

input {
    height: 30px;
    min-width: 30%;
    margin: 0 0 0 10px;
}

it look like this when you resize it (i only make the changes to the name and email inputs)

pen
pen616×574 21.5 KB

3

I tried to do what you said but it didnt work as you did. Could you do these changes on my your pen and share it? also you can still see how i did what you said from the my codepen link

4

yeah there where some issues but it work my pen