Feedback welcome + some help
I found really hard to create a responsive design, I ran out of time and I couldn't find an way to create it, so, I am feeling really upset. Plus, I don't think I had really good practices, I feel like the css selectors names are not well declared and my HTML structure is not concise.
Nice work here MATHEUS, I saw that you used a hardcoded width of 500px on the advice-container, instead of that for these types of design which involves a card, try to use a percentage value and then set a max width, this way on smaller screen sizes you won't have to worry about overflow and on bigger screen sizes the width won't expand beyond the max-width value. This is a very easy way to make responsive card designs. Hope it helps you, you can check out my implementation if you have some doubt.
Please let me know if I missed any error handling or If you come across any issues. Thank You !
Thank You Marta for bringing this to my attention, actually the problem was not with the logic but the digits of input were hiding under the element that I positioned absolutely in the input field to hide the arrow keys of number field, I was not aware of the fact that it could be done from CSS, so now I've changed the code and the issue seems to be fixed, If you can please do check out. Thank You again for the review .
Instead of using the img tag you could have used the background-image property of css and then use background-color and background-blend-mode to change the image color. Using the background-image property is also helpful when you want to switch between different images in different screen sizes. Good Work here !!
Please let me know of ways I can improve this, thank you.
You could have added a border-radius as shown in the design and center the main content, otherwise great job !!
