Skip to content
Submitted over 1 year ago

HTML & CSS Qr Component

Valerye Hidalgo Garcia•10
@valeryehg
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

The areas of my code I'm most concerned about is the CSS; positioning and centering elements was the hardest part for me to figure out. I'd like to know if there is a better practice or more efficient way of positioning elements than the one I used.

Community feedback

  • ANSHUL LAMBA•120
    @Hawk3037Posted over 1 year ago

    you have added a div .card-box and used it for giving the background color white to the qr section but instead of this there is a simple method just start this div before the image and close after the paragraph and then give it a background color and padding it will work the same. so no need to add extra coding for this then

    I will suggest using display: flex it will lot easier to use.

    Marked as helpful
    1
  • Steve•1,170
    @peanutbutterjllyPosted over 1 year ago

    Hey Valerye 👋!

    Good job completing your solution.

    Centering the card component would make things simpler using Grid or Flexbox, but in your example it wouldn't work 'right-away' without some markup/HTML changes.

    What I mean is that I would put the h1, img, and p in your div with a class of 'card-box' so you can justify/align the content.

    MDN-Center an element

    StackOverflow - centering in Grid

    Once again, good job with your solution and keep at it!

    Marked as helpful
    1

Please log in to post a comment

Log in with GitHub

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