Design comparison
Solution retrospective
I find it difficult when i was trying to make website responsive. I am unsure of my margins. What is the best practice of making websites responsive?
Community feedback
- @freakyjonesPosted over 2 years ago
Hi kounik,
congratulation on completing this challenge.I just saw your code and would like to suggest two videos for learning more about website responsiveness and box-model, 1.https://www.youtube.com/watch?v=srvUrASNj0s //for website responsiveness 2.https://www.youtube.com/watch?v=-8ORfgUa8ow //for CSS box modal
the 2nd video is pretty long if you don't want to watch the whole video, you can watch only the box-modal section.
hopefully this help, Thanks, and happy coding :)
Marked as helpful0 - @PhoenixDev22Posted over 2 years ago
Hello kounik,
Congratulation on completing this frontend mentor challenge. Your solution looks great. I have some suggestions regarding your solution:
- You should use
<main>
landmark to wrap the card. HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology.
- Page should contain
<h1>
. In this challenge , as it’s supposed to be a part of a whole page, you may use<h1>
withsr-only
class hidden visually and present for assistive tech users.
- The alternate text should not be hyphenated, it should be human readable. In my opinion, the image is an important content. The alternate text should indicate where the Qr code navigate the user: like
QR code to frontend mentor
not describes the image.
Overall, Excellent Work! Hopefully this feedback helps.
Marked as helpful0@Valhalla-2Posted over 2 years ago@PhoenixDev22 thanks for your feedback,, you helped me alot
1 - You should use
- @DavidMorgadePosted over 2 years ago
Hello kounik congrats on finishing the challenge!
Apart from what Phoenix said, you can also center your component a bit better with just a little snippet of code, instead of using
margin
on yourcontainer
, remove it and center it using flexbox in thebody
, your body should look like this (try it on your own code!):body { background-color: hsl(212, 45%, 89%); box-sizing: border-box; font-family: 'Outfit', sans-serif; margin: 0; text-align: center; display: flex; // HERE WE ADD FLEX AND CENTER IT flex-direction: column; justify-content: center; align-items: center; // ALSO SETTING THE MINIMUM HEIGHT OF YOUR BODY TO THE WHOLE SCREEN! min-height: 100vh; gap: 1rem; }
With this your component should be completely centered!
Hope my feedback helps you for future projects!
0@Valhalla-2Posted over 2 years ago@DavidMorgade thanks , i will try that ,, thank you for you feedback
1
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