
Design comparison
Community feedback
- @beowulf1958Posted about 2 months ago
Congratulations on completing this challenge. You made very good use of flexbox.
However, the content breaks out of the container; the image overlaps the top and the paragraph overlaps the bottom. This is easily fixed by removing the
height: 400px;
from the .qr-img-card <div>. If you remove the fixed height the <div> will automatically adjust to contain all of the content with no overlap.Also, the content is flush against the edges of the .qr-img-card; you need to add
padding: 15px
to the card div.Hope this helps. Keep on coding!
0 - @alaa-mekibesPosted about 2 months ago
Well done 🎉
- Use Only One <h1> Per Page
Maintain a proper heading structure, using <h1>, <h2>, and <h3> in a hierarchical manner. This improves both organization and SEO.
- Use semantic HTML elements for better structure and accessibility. For example:
<body> <main> <!-- Your code --> </main> </body>
- Never Leave the alt Attribute Blank
Always provide a meaningful alt description for images. This improves accessibility and contributes to better SEO.
- Add
min-height: 100vh;
insidebody
to get full-screen.
Your work is outstanding, stay consistent and keep shining!
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