Skip to content
Submitted almost 2 years ago

QR Code for Desktop and Mobile

Lauren Delmar•100
@lrdelmar
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

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.

Code

Please log in to post a comment

Log in

Community feedback

  • Mtalafa•350
    @Mtalafa

    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
  • Abiel Bright•260
    @abie237

    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
  • Guerinik Abderrahmane•460
    @AbderrahmaneGuerinik

    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

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