Design comparison
SolutionDesign
Community feedback
- @besttlookkPosted over 2 years ago
Hi, Follwoing are some points you should consider. 1 Center the content w.r.t the screen. You can use flex-blox do to that.
body{ min-height:100vh; display:flex: align-items: center; justify-content:center: }
- Do not allow user to enter decimal number for number of people.
- Hide the up/ down arrow from input field
/* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Firefox */ input[type=number] { -moz-appearance: textfield; }
- On entering very large number, number overlap the icon. Add extra left-padding to avoid overflow. also give some limit for for the input field. Show error if limit is crossed.
- Icon also does not look properly aligned in the middle.
Good Luck,
Happy Coding
Marked as helpful1@vitorGoncalvesOliveiraPosted over 2 years ago@besttlookk thanks a lot for you feedback.
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord