Mobile-first solution using Flexbox QR CODE component
Design comparison
Solution retrospective
Please kindly take a look at my solution and give some feedbacks, advice or tips. I encountered some difficulties trying to make it responsive on different screen sizes but I'm not sure if I did a great job. Also any tips on best practices would be appreciated. Please feel free to share your thoughts and opinions as it will help improve my skills. Thanks
Community feedback
- @0xabdulkhaliqPosted over 1 year ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
- I have other recommendations regarding your code that I believe will be of great interest to you.
CSS 🎨:
- Looks like the
<footer">
element has been placed bottom usingmargin
. So let me explain, How you can place the component at bottom with usingfixed
positioning forfooter
- Luckily you already used
Flex
layout ofcss
to center the component, So you just want to addfixed
position for<footer>
element to place it in bottom of the page
.attribution { position: fixed; bottom: 1em; }
- Now remove these styles, after removing you can able to see the changes
.attribution { margin-top: 15px; }
- Now your component has been properly at bottom
.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
1@Kolade1024Posted over 1 year agoThis is awesome..Thanks for this@0xAbdulKhalid
0 - @gianellinPosted over 1 year ago
I like your solution for this challenge. Clean HTML too! It is good practice for SEO to have one H1 tag per page (which you do have!). And since there is one, you do not really need to create a class or id in this instance . For style purposes, you can do : h1{...}.
Great job!
1@Kolade1024Posted over 1 year agoThanks a lot for your feedback @gianellin. Since it's just one h1 tag, no need for class or I'd. Noted
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