Create responsive survey form - rearrange 2 columns to 1 column with media query and min width

Continuing the discussion from Role-Playing Survey feedback:


I can’t seem to get the media query for my survey form responsive. If I change the size of the browser I would like the class right align to float left so it is under the respective label. I have tried for three hours but I feel like I am a bit out of my league. So, I would appreciate any tip!

My codepen is here:

Note: I have started from scratch and will try to built the structure first before adding the content.

Thanks a lot in advance for your help!

This layout is broken! But easy to fix!

I suggest you check this survey form challenge walkthrough article. It comes with notes, and of course the responsive 2-col/1-col layout you are looking for.

Keep goin on great work, happy programming.