Media Query Form

Media Query Form
0

#1

Can’t figure out the media query part to make this form responsive. Suggestions would be appreciated.


#2

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


#3

Got it. I think i got carried away a bit.