Please check out my project

Please check out my project
0

#1

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!

my project


#2

You can add e.g. max-width: 960px; (or 60rem) to your form so it won’t grow too wide on large screens.

Actually your @media queries currently are just messing with your layout :wink: (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 :slight_smile:

I highly recommend you to watch this tutorial on responsive design. It is awesome!


#3

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.