Can’t figure out the media query part to make this form responsive. Suggestions would be appreciated.
Hi Hassan - I’m very confused by your query and am wondering if you copied a lot of the CSS code for your project from the FCC example? Having looked at your Codepen, I was surprised that you’d be using relatively sophisticated and efficient terms in the CSS (which I’d be surprised to see a beginner using) yet you wouldn’t be able to adapt your CSS using a simple media query. I did wonder if you were perhaps a seasoned developer that was just working through the curriculum, but I think you would easily understand media queries if you were.
Your #dropdown, .input-area, .right, .labels all use exactly the same parameters as the FCC example and other classes and IDs are almost identical - which are so specific as to not be a coincidence.
It’s obviously ok to use the source code as inspiration, but it’s a bit pointless in terms of learning - which is what we’re all here for.
The issue in your media query is you need specify what happens to various elements when the size of the browser window changes - and you haven’t specified anything in your code.
W3 Schools does a good introduction to them here: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
I think you should take a read of that and also try and code the CSS yourself, from scratch, otherwise you’re not really learning and probably convincing yourself you’re a bit further ahead in your learning than you actually are.
Good luck with it, Dan
Got it. I think i got carried away a bit.