Design comparison
Solution retrospective
Hi! Today I did this challenge and there are things that still makes me feel uncomfortable about the results, like the fact that boxes deform depending on the device. It was more difficult than I expected 😅 If you have any recommendation, it would be very helpful. Thanks in advance 🙇🏻♀️
Community feedback
- @UnkookerinhoPosted over 1 year ago
Hi Illed! 👋 You did a great job completing this challange! 🎉
To make sure boxes look good on all devices, I would reccomend changing
@media (max-width: 375px)to width where main content that you want to wrap starts touching sides of the screen, which in this case is about 640px. After this slight change your page looks perfect on all devices! I hope that this is answer to deforming boxes. If not, you can ask further!Also, if you want to make elements of summary always be on furthest right/left (I mean reaction on left, and then 80/100 on right etc), you could change justify-content to space-between in .white-box section instead of gap, so it's nicely placed on both sides with space between them. Then you would have to have some fun in html to put icons and category names together, and add some padding in css on left and right to make it look better. Icons can be moved with translateY too, because they will be too high if you don't do that. Maybe you will find this cool, even tho your question was about something else, it just makes this section look better on all devices.
I hope you found my answer helpful! 😊 Keep up your great work, and I wish you happy coding! 😀
Marked as helpful0@IlledNacuPosted over 1 year ago@Unkookerinho it is very helpful, I didn't know about translateY nor how I should use space-between. Thank you 🙌🏼✨
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