Design comparison
Solution retrospective
Hello, this is my first React project, I've recently started learning CSS, and I still having some trouble when creating responsive mobile websites, in this challenge for example, I wasn't able to create a fixed "Learn More" button. Tips, advises or critics are welcome, thanks!
Community feedback
- @ApplePieGiraffePosted over 3 years ago
Hello there, laura-2035! 👋
Congratulations on completing your first Frontend Mentor challenge! 🎉 Nice effort on this one! 👏 The card component itself looks pretty nice! 😀
I think using flexbox to center the content in this page would be easier than using CSS grid to do so (currently, the card component seems to be pushed to the bottom of the page quite a bit on my screen).
Also, there's a little bit of shift in the height of the card component when the buttons are hovered over in the mobile layout of the site because of the border that is added around them. You can get rid of this tiny shift by adding a transparent border around the button when it is not hovered over and simply changing the color of the border to white (or whatever other color you choose) when it is hovered over. 😉
Hope that helps a little. 🙂
Keep coding (and happy coding, too)! 😁
2@matiussiPosted over 3 years ago@ApplePieGiraffe Thank you!! I followed your advices and the component seems a lot better :D
I didn't know about the transparent border, I'll use this trick more frequently, thank you so much!
1@ApplePieGiraffePosted over 3 years ago@laura-2035
No problem! 😀
BTW, I took another look at your solution, and I think the changes look great! 👍 Nice work! 🙌
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