Stuck in media queries while making Survey Form project. Please Help.

Hi guys, I’m working on Survey Form project but get stuck in using media queries for making the form showing one column only with several rows. I use display: grid for the form container. Please help me figuring out how to do it properly.

here is my pen link :

1 Like

Hi, there kindly try using the

display: flex;
flex-direction: column;
justify-content:  center;

Thank you.

1 Like

You can try what @mrkoodi has said, except if you want to make it center horizontally, you have to use align-items: center instead of justify-content, because flex-direction is applied column wise

Else you can try this, since you have the grid

Make text-align: left to the div which contains the label

Make the padding of ul to 0 which contains the checkbox and radio

Give a full width to all the fields, input, textbox to 100% width in @480px


thank you very much :slight_smile: it’s working except the text area.
I’ve tried to give the width : 100% but it still doesn’t work.

1 Like

Thank you very much. Very fast response and it works!! :slight_smile:

1 Like