@MikeBeloborodov
Posted
Don't sweat over it, man. It looks really good! Tried out your calculator, it says my BMI is bad D: Well, gotta exsercise more I guess... Anyway about your code. I looked over your styles and my main tip for better responsiveness is: try to avoid pixels! When you use pixels it's very hard to resize everyting for mobile and desktop. Try using rem or em units, you can find a lot of videos about it on youtube. I usually do mobile design first, set everything in rem (paddings, margins, font-sizes... just almost everything except border width, setting them in px is ok). And then when I finish my mobile design I can just create a simple media query to set my html font-size to less or more than before and my whole page resizes like magic! For example:
@media screen and (max-width: 22rem) {
html {
font-size: 0.3em;
}
}
Try it out on a smaller project, like a card component or something and then integrate it into your toolkit for bigger projects. Good luck!
Marked as helpful
@ChrisCablish
Posted
@MikeBeloborodov i didn't realize you could do this. Thanks for the reply, i will be incorporating this for sure!!!