Please log in to post a comment
Log in with GitHubCommunity feedback
- @Shanxx191919
The HTML structure is good overall, using semantic elements like <header>, <main>, and <footer>. However, you could improve accessibility by adding more descriptive alt attributes to the images and using aria-labels or role attributes for better screen reader support. Consider adding more semantic tags like <article> or <section> for improved SEO and readability.
For responsiveness, the layout is flexible due to the use of flexbox, but you might want to add media queries to fine-tune the layout on smaller screens, especially adjusting the card width and text size. The code is clean and readable, but splitting the CSS into a separate file could improve maintainability, particularly for larger projects.
Marked as helpful - @BoxyPipesnake
Hi! Great job on your project!. I did notice a small issue when viewing it on mobile: there’s a bit of horizontal overflow, which causes a slight scroll.
One way to fix this would be to adjust the .card class. Instead of using width: 384px, try using max-width: 384px. This allows the card to shrink appropriately on smaller screens. Additionally, adding margin will give it some breathing room on the sides, keeping it from touching the edge of the screen.
- @rodolfohgc
Hello, Emanuel!
Your solution was nearly there, but I recommend some enhancements:
The border radius and shadows on the card are significantly smaller in your rendition. Please refer to the Figma file, which contains a comprehensive design system; it will provide you with additional details such as colors and font styles. Rather than using the <h2> tag, it would be more semantic and appropriate to use <h1>.
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