Skip to content
Submitted over 1 year ago

CSS properties for a QR-CODE component

LLL0908•40
@LLL0908
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

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

Code

Please log in to post a comment

Log in

Community feedback

  • dbmourits•60
    @dbmourits

    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 helpful
  • P
    Boris•4,130
    @makogeboris

    Hi LLL0908, great job, here are some feedback

    • On your body element you have a typo should be display: flex not felx, I guess that's why you had to use position: absolute and transform: translate on your .qrcode to center it, you can delete those lines. Also add a min-height: 100vh, flex-direction: column on your body.
    • All content should be wrapped within landmarks. Wrap a main tag around your qrcode and a footer for the attribution.
    • Your .qrcode should have a max-width in rem not width. Try as much as possible to avoid setting fixed widths and heights on elements, use max-width or min-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 helpful
  • Przemysław Rajn•40
    @rzuanisko

    For me, that's realy nice work. U have good proportion, but u can add biggest margin-top on your .container.

Join 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