Skip to content
Submitted about 1 year ago

QR Code for Desktop and Mobile

Lauren Delmar•60
@lrdelmar
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

I found it difficult to align the qr component in the center vertically so I did a bit of searching around and found a solution on Stack Overflow, which was to use absolute positioning and set the position to 50% and use transform translate by -50%.

I am wondering if this is best practice? I am able to center content using flexbox but this only seemed to be working horizontally and not vertically. When using align-content it didn't seem to move. I thought maybe I needed to set a height for this to work but it didn't have any effect.

I had originally created padding around the qr image however this created problems with the border-radius, so I changed this to margin and set the image to 90% width instead.

Community feedback

  • Mtalafa•350
    @MtalafaPosted about 1 year ago

    Lauren Delmar, well done for completing your first challenge. The way you centered it it`s not wrong, but you can also do it with flexbox in the following way: display: flex; align-items: center; justify-content: center; height: 100vh; You can also check my solution, I centered it with flexbox. Hope this helps. Happy coding!

    Also, I usually delete the footer from my projects. If you have the footer as well and you display flex on the body you should use flex-direction: column; as well

    Marked as helpful
    1
  • Abiel Bright•260
    @abie237Posted about 1 year ago

    Well done bro ! You already have the habits of a great programmer ! RESEARCH is key !

    what i propose is that inside the Qr Container you could create two respective divs ; one for the image and one for the text content

    To fit the image in its div use width:100%,height:100%,and the object-fit: cover.

    Marked as helpful
    0
  • Guerinik Abderrahmane•480
    @AbderrahmaneGuerinikPosted about 1 year ago

    Congrats for finishing this project ! but you can improve your code

    • i noticed you used position : absolute to center the container but no need, you've already used display:flex and set align-items and justify-content to center and its enough to center the container.

    • use CSS variables.

    • use BEM methodologie for naming classes.

    Enjoy coding

    0

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