https://codepen.io/jinxlaw/pen/dJjQod
Cannot figure out how to make it responsive.
Update: Cleaned up the code. Still cannot figure out how to make it responsive. Advice and/or resource links will be greatly appreciated. Thank you in advance.
Your CSS is hard to maintain and hard to read. Did you use a generator?
You would need to clean your code first, otherwise adding responsiveness will require duplicating the same properties as it is already the case.
Hello @Jinxlaw ! 
First of all, your CSS code is messy. Don’t leave all of your declarations on one line. Only leave a single line property when you only assigning one declaration.
To have more consistency over your code structure, I would recommended reading these pages:
CodeGuide
Google HTML/CSS Style Guide
I just skimmed the page and one of the reasons why your page is not responsive is because of the fixed size of the fonts
Here is an example:.
font-size: 24px;
Instead of using absolute units (px, in, cm), I recommended to use relative units instead especially em and rem.
Ehh… That’s all I can do…
As I’ve said before, your CSS code is hard to read.
People here will have an easier time if you fix that first.
Good luck!
Shrink your page and find out at what stage elements start to jump out, lets say they start jumping out at 600px.
You can solve this with media queries like this:
@media screen and (max-width:600px) {
// in here u reduce size of your font and and size of your input fields so they can fit your blue container...
}
If they start jumping out again at lets say 400px just repeat this process…
I hope this helps, happy coding!
I did not use a generator. Thank you for the feedback. Will clean the code.
Will clean the code. Thank you for the feedback and the helpful links.
Thank you for the feedback.
bump (asked for by user)
1 Like