Design comparison
SolutionDesign
Community feedback
- @krushnasinnarkarPosted 5 months ago
Hi @giamimino
-
Wrapper Centering:
- The
body
usesdisplay: flex; justify-content: center; align-items: center;
for centering, but an additional height property is needed to ensure perfect vertical centering. - Suggestion: Add
min-height: 100vh;
to thebody
to ensure the wrapper is centered both horizontally and vertically.
- The
-
Semantic Tags:
- The current implementation lacks semantic HTML tags.
- Suggestion: Replace the
<div class="wrapper">
with a<main>
tag and structure the content with semantic tags like<header>
,<section>
,<article>
, and<footer>
.
Summary: The solution follows the color and typography guidelines well and ensures responsiveness for mobile devices. However, the
.wrapper
class is not fully centered, and the HTML lacks semantic tags, affecting accessibility and structure. Improvements can be made by adjusting the centering technique and using semantic HTML tags.Feel free to reach out if you have more questions or need further assistance.
I hope you find my feedback valuable, and I would appreciate it greatly if you could mark my comment as helpful if it was!
Marked as helpful1 -
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