Design comparison
Solution retrospective
My current challenge is working on the mobile responsiveness of the card, so if you have got any suggestions kindly share, even though I'm hoping to have come up with a solution by then.
Community feedback
- @correlucasPosted about 2 years ago
👾Hello Anthony, Congratulations on completing this challenge!
You’ve done really good work here putting everything together, I’ve some suggestions to improve the design:
1.Add transitions to make the IMG HOVER interaction smoother while the element gets hovered, you can use a value like
transition: all ease-in 0.5s
.2.You’ve used
<div>
to wrap the card container, in this case you need to use<main>
since this is the main block of this page.3.To improve your component overall responsiveness, something you can do its to create a media query to save space in the
pricing section
to make each information in a different row. Here’s the code for this media query.@media (max-width: 350px) { .pricing-time-info { display: flex; align-items: center; justify-content: center; flex-direction: column; GAP: 10PX; } }
✌️ I hope this helps you and happy coding!
Marked as helpful0@anthonynwaweruPosted about 2 years ago@correlucas Thanks a bunch Lucas, have implemented the additional changes that you have shared. ✊
1@correlucasPosted about 2 years ago@anthonynwaweru I'm happy to hear that Anthony! If you don't mind I can analyse your other solutions. Say me if you agree. Keep it up =)
0@anthonynwaweruPosted about 2 years ago@correlucas Sure Lucas please do, I'll really appreciate, I'm planning on staying consistent, one solution per day. 😁
0
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