Design comparison
Solution retrospective
I completed this challenge after finishing my first Frontend Mentor project, which was really helpful, especially with the tips I received. The trickiest part of this challenge was deselecting the other numbers after selecting one, but a quick search on Google and Stack Overflow helped me find the solutions I needed. I also played around with different elements for the sections and ended up using <span> for the numbers. I'm not entirely sure if it was the optimal choice, but it definitely worked well. If you have any suggestions or alternative approaches, feel free to let me know.
Community feedback
- @ExpertoMontaneroPosted over 1 year ago
The desktop design is simply 1:1, so congratulations :>. Refering to your question, I think it would be better option to make this ''numbers'' buttons as buttons (<button> </button>), but it is a detail. However mobile accesibility is bigger problem. Your design is not responsive. So that you should use some media querries on your design. Try look how your design looks on some mobile devices in dev tools. You can look at my solution Media querries on my profile. I hope that I helped. If you have any questions, go on. Happy coding :>
Marked as helpful0@AdrianeSantosDevPosted over 1 year agoHello @ExpertoMontanero
It's actually funny how using <button> instead of <span> seems so obvious now. I don't know why I didn't choose that initially, haha. When it comes to the solution being responsive, I did try using a media query, but it didn't work out quite like yours. I'll definitely make some changes to address that. Thanks a lot for the feedback; I really appreciate it.
0@ExpertoMontaneroPosted over 1 year ago@AdrianeSantosDev I see that you fixed it. Great job. :>
0
Please log in to post a comment
Log in with GitHub
Join 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