I know this is a typical tip calculator. All the css is pretty sloppy i was just adding to it as things came t me so it’s all unorganized. What I really want is some advice on the media queries. I’m just getting into it so it seems like the elements are changing size and getting sloppy as i adjust the screen size. The small screen under 480px seems to look nice. I know over 1000px or so, will look too wide. I’m also making the page fluid using no bootstrap because I would like to learn how to make the page responsive with only css. So any advice on that, would be great as well. Thanks!
You can add e.g.
max-width: 960px; (or
60rem) to your
form so it won’t grow too wide on large screens.
@media queries currently are just messing with your layout (check it by slooowly resizing you screen). You can remove all of them, add
width: 95% to your
button selector and voilà - you have a responsive layout
I highly recommend you to watch this tutorial on responsive design. It is awesome!
Looks great, as for making the page responsive be sure to try and also make the buttons resize height-wise so that they’re easier to click on mobile devices.
Also, always comment your code and here’s a good example why you should do that: You’re multiplying your input by .2 without mentioning what you’re doing and why you’re using .2 instead of another value (or instead of creating a constant value called tip_percentage with the value of .2. In a project like this you can get away with that, but any project with a bit more depth will become problematic and will lead to messy code. Remember, every project has at least two developers: You and you in two weeks from now.