Design comparison
Community feedback
- @DylandeBruijnPosted 5 months ago
@TarekGawish1
Hiya! š
Congratulations on your solution, it looks very close to the design! I can tell you put a lot of effort into it.
Things I like about your solution š
- Use of semantic HTML elements
- Clear descriptive CSS classes
- Use of CSS custom properties
Things you could improve āļø
-
You could add a
min-height: 100vh
to yourbody
element so it takes up the full height of the viewport while still being able to grow when the content inside it grows. -
On smaller viewports your solution is missing a couple things:
padding
at the top should disappear, image should lose it's border radius, image should be flush at the top. -
I recommend not setting a fixed
height
andwidth
on your elements or you'll run into overflow issues. Aheight: auto
is fine, whichblock
elements are by default. -
The dimensions of your image warp a lot when the viewport changes, this is due to the fixed
height
you have on it. Try changing your styling to this:
img { border-radius: 10px; max-width: 100%; }
I hope you find my feedback valuable, and I would appreciate it greatly if you could mark my comment as helpful if it was! š
Let me know if you have more questions and I'll do my best to answer them. šāāļø
Happy coding! š
Marked as helpful1@TarekGawish1Posted 5 months agoHi @DylandeBruijn š
Thank you so much for your thoughtful feedback! I really appreciate the detailed insights and suggestions you provided.
Things Iām thrilled about š
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