Stuck in media queries while making Survey Form project. Please Help. https://codepen.io/edriany/pen/BPXXJa

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 : https://codepen.io/edriany/pen/BPXXJa

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

2 Likes

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