Responsive Web Design Projects - Build a Survey Form - Need help

Can anyone please help on above issue.

The Structure is,

<div class="outer">
    <div class="label">
        <label>
    </div>
    <div class="input">
        <input>
    </div>
</div>

Make .outer as display:flex and aling-items: center

Give .label a width of 30% and .input a width of 70%, therefore they align as you expect, make sure your input text fields have 100% width

i tried this out . But it did not worked.

Based on your structure, you have to convert the label into a block element by giving display:block

Now give the label a width of 30%

Give the .right class a width of 70% and make the <input> to 100% width

Now.left should be given display:flex;

Note: You have used id’s repeatedly, id should be used once or else it may break the code

Let me make you clear in my next post

can you please provide its pen link.I mean for screen shot you shared.

I have explained the code inside comments.

@Sujith3021 .Thank you so much. : ) . i am going through this.

Thank you @zapcannon99 @sorinr @Sujith3021 . Thank you guys for the help and knowledge you shared . :slight_smile:

You are welcome.! Happy coding.! :slight_smile:

1 Like

@Sujith3021 facing issue ,my text is not aligned with checkbox .

And also in textarea placeholder text is not aligned at the top of textbox.

code pen link

Its because you have a label around checkbox and earlier you had applied text-align:right to labels, so it gets conflicted here too

what should be alignment in this case?

If i remove that it is breaking radio button and checkbox alignment?

Have a common class for all the labels except for checkbox label and radio label, for labels of check and radio you can define another class and move it accordingly, and also you have used ul there, make sure to remove the padding and margin of ul which has for default

You mean to say something like this
ul {
margin : 0px;
padding : 0px;
}

Yep and you can add the margins and padding based on your need

1 Like

And also , text area placeholder is not aligned properly .

You can refer my pen which i posted before for the update, and have a look at

https://www.w3schools.com/html/html_form_elements.asp

And this

1 Like

Thank you again. will look into it