Design comparison
Solution retrospective
I tried hard to let every items go to the right place. It's difficult for me since I'm really a beginner. I'd like to try different methods next time and make my coding structure more clearly.
What challenges did you encounter, and how did you overcome them?I'm confused with the position and I searched for the solution.
What specific areas of your project would you like help with?Position
Community feedback
- @dbmouritsPosted 8 months ago
You did a pretty good job.
i see you used both "display: flex" and "position: absolute" i would advise to only use "position" if it is absolutely necessary. In my opinion you could remove the (position, top, left and transform in .qrcode) and try playing with padding (and margin) around objects.
Starting with "display: flex" is good practice. https://css-tricks.com/snippets/css/a-guide-to-flexbox/
position can be helpfull when you want to move things more independently/fixed from the rest of the code and or make objects interactive. Maybe the following website helps you a little further in your understanding about position: https://css-tricks.com/almanac/properties/p/position/
Marked as helpful0@LLL0908Posted 8 months agoThank you for sharing the websites! They are so clear and understandable. I'm sure that they will be of great help to me.
0 - @mkborisPosted 8 months ago
Hi LLL0908, great job, here are some feedback
- On your
body
element you have a typo should bedisplay: flex
not felx, I guess that's why you had to useposition: absolute
andtransform: translate
on your .qrcode to center it, you can delete those lines. Also add amin-height: 100vh, flex-direction: column
on yourbody
. - All content should be wrapped within landmarks. Wrap a
main
tag around your qrcode and afooter
for the attribution. - Your .qrcode should have a
max-width
in rem notwidth
. Try as much as possible to avoid setting fixed widths and heights on elements, usemax-width
ormin-height
if you have to. - Consider using a modern CSS reset at the start of the styles in every project. Like this one modern css reset.
Marked as helpful0@LLL0908Posted 8 months agoThank you for your feedback! They are very helpful and I have applied them. By the way, I'm surprised that you can catch my spelling mistake since I thought no one will read my code. All in all, i'm soooooo grateful that you gave me this feedback.
1 - On your
- @rzuaniskoPosted 8 months ago
For me, that's realy nice work. U have good proportion, but u can add biggest margin-top on your .container.
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