Design comparison
SolutionDesign
Solution retrospective
HI. This is my second React project, So it's a little buggy. And I have just finished my high school entrance exam, so I'm very tired. Because of this, my project is not finish just yet, I haven't do mobile design. So I'm love your suggestions for my project :)
Community feedback
- @sahilataharPosted over 1 year ago
Hi I am Sahil Atahar. There is some issues in your project.
Here are solution of some problems:
- Hide input number arrow
/* Hide Input number arrow for Chrome , Safari*/ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { display: none; -webkit-appearance: none; margin: 0; } /* For Firefox*/ input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
- Fix bottom credit paragraph:
/* For medium and large devices */ .attribution { width: 100%; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); font-size: 11px; text-align: center; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); } .attribution a { color: var(--purple); } /* For small devices */ .attribution { position: static; transform: translate(0); -webkit-transform: translate(0); -moz-transform: translate(0); -ms-transform: translate(0); -o-transform: translate(0); }
Marked as helpful1
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