Submitted about 1 year ago

QR Code for Desktop and Mobile

Lauren Delmar• 10

@lrdelmar

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

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

@Mtalafa

Posted 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

Abiel Bright• 260

@abie237

Posted 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

Guerinik Abderrahmane• 480

@AbderrahmaneGuerinik

Posted 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

Please log in to post a comment

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