Design comparison
Community feedback
- @correlucasPosted about 2 years ago
πΎHello Andrew, congratulations for your great solution!
βMy rating for this solution: βββββ
Great solution and great design! The card is already responsive, but something that you need to do to make it more flexible is to work in the rating button numbers, applying
flex-wrap: wrap
will make it adjust with the card with, note that currently the container stop to shrink due the lack of this property:.card .radio-group { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; }
βοΈ I hope this helps you and happy coding!
Marked as helpful1@andrew-g-ayadPosted about 2 years ago@correlucas I really appreciate your reaching out and your valuable feedback. And I feel like I need to do what you mentioned to make it more responsive, but yet I'm not getting what I should do. maybe if you explain the problem in more detail will help me a lot.
Thank you in advance.
0@correlucasPosted about 2 years ago@andrew-g-ayad I've checked your solution and now the button with the numbers are getting in different row and before it wasnt. If this is not flexible they stay in the same row and don't make the component shrink.,
1 - @CharlieeLuna23Posted about 2 years ago
Everything looks good, nice job!
If I'm allowed to add a little feedback, I'm noticing that you added an ID to each button and created a variable for each one to later make an array with all those variables. An easier and cleaner, in my opinion, way to do this is to add a class to all the buttons and then you can use something like:
const btnsArray = document.querySelectorAll('.the-classname-you-chose');
This will give you an array with all the items that share that class, in this case, your buttons.Hope this helps!
Marked as helpful1 - @romila2003Posted about 2 years ago
Hi Andrew,
Congratulations π for completing this challenge, it was a great attempt. I found some issues I want to address:
- In mobile screen, I noticed that the card touches the side of the screen so I would suggest you to use the
max-width
property and then add apadding
property within the body with a value of0 10px
. - Instead of using the
margin-top
property, you could use theflex
property within the body e.g.
body { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
Overall, great attempt and wish you the best for your future projects so keep coding π.
Marked as helpful1@andrew-g-ayadPosted about 2 years ago@romila2003 Yes, I know this is the right way to center the card. just forgot to fix it before submitting the challenge. Thank you for reminding me. You also reminded me of how to make it fit on mobile screens. which was really helpful π
I'll fix these right away π.
Thank you
1 - In mobile screen, I noticed that the card touches the side of the screen so I would suggest you to use the
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