Design comparison
SolutionDesign
Community feedback
- @thibault-devergePosted about 1 month ago
Hi,
Overall, your project is really well done and closely matches the original design for both desktop and mobile views. Great job! However, I have a few suggestions that could help improve it further:
Image Alignment
- Issue: The image doesn't show the same portion as in the design.
- Suggestion: Use
object-fit: cover
andobject-position: left
to maintain the aspect ratio and align the image to the left, ensuring it matches the design.
Responsiveness
- Issue: The responsive layout breaks between 370px and approximately 800px.
- Suggestion: Ensure the design is responsive across all screen sizes. Consider using higher breakpoints and maintaining the mobile layout up to a wider screen width before switching to a horizontal flexbox layout for the card.
Share Panel Feature
- Positive: Great job implementing the feature to close the panel by clicking outside of it!
- Suggestion: It would be even better to allow users to close the panel by clicking the button again once it's opened.
Code Organization
- Suggestion: Try to use fewer pixels and prefer
rem
orem
for sizing. Reserve pixels for small values like borders and box shadows to enhance scalability and responsiveness.
Overall Impression
You're very close to the original design for both desktop and mobile views—well done! Addressing the responsiveness issues will make your project perfect.
Wishing you the best for your next project!
Marked as helpful0
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