Design comparison
Solution retrospective
Completing the project.
What challenges did you encounter, and how did you overcome them?Understanding CSS
What specific areas of your project would you like help with?Understanding CSS
Community feedback
- @correlucasPosted about 2 years ago
πΎHello Alex, congratulations for your first solution and π welcome to the Frontend Mentor Coding Community!
Great great solution! Its everything good made here, you've the card component design matching all requirements, component and image fully responsive. The only thing about responsiveness you can improve is to add a margin to main like
margin: 20px
to avoid it touching the screen edges and reduce the code.You can build this with a simple approach, without using unnecessary divs, all you need is a single<main>
or<div>
to keep all the content inside, and nothing more. The ideal structure is thediv
and only the image, heading and paragraph.See the structure below:
<body> <main> <img> <h1></h1> <p></p> </main> </body>
πΎMy rating for this solution: βββββ
π I hope this helps you and happy coding!
Marked as helpful1@Alexr6667Posted about 2 years ago@correlucas Thank you for the detailed review. The explanation about simplifying my code was really helpful. I am a little confused at your description of adding 20px of margin to the main. Could please explain this further?
1@correlucasPosted about 2 years ago@Alexr6667 When you scale the window the content start to get narrow and the card start to
touch
the screen edges, to avoid that you can amargin: 20px
to create a gap between the card and the screen bound.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