Design comparison
Solution retrospective
I need some feedback :) starting the junior challenges
Community feedback
- @correlucasPosted about 2 years ago
👾Hello Anass Sanba, Congratulations on completing this challenge!
You’ve done really good work here putting everything together, I’ve some suggestions to improve the code:
You’re in the right track I can see that you’ve used the majority semantic tags possible for this challenge, the only block you’ve missed is the paragraph containing the
quote text
you can improve the accessibility there using<blockquote>
to indicate to screen readers that the content inside that paragraph is a quote.Add the correct
container size
that is a bit off, this challenge uses the standard container size that ismax-width: 1110px
.main { MAX-WIDTH: 1110PX; display: grid; grid-template-columns: repeat(5, auto); margin: 20px; gap: 20px; justify-items: center; align-items: center; margin: 0 auto; }
✌️ I hope this helps you and happy coding!
Marked as helpful1 - @OhSorrowPosted about 2 years ago
Hey dear anass sanba! Congratulation for completing this JUNIOR challenge!
I suggest you setting a
max-width
of1200px
on themain
to prevent stretching the page on desktop displays.I hope it helps you :)
Marked as helpful1 - @hyrongennikePosted about 2 years ago
HI @anasssanba1,
NIce job on completing the challenge
Just on mobile it's a bit narrow you can add the following in a to the body rule to fix it.
body { min-height: 100vh; width: 100%; margin: 0; }
remove the
height: 100vh
it cuts off on mobile. Hope this is helpful.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