Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

QR code preview card using HTML and CSS

@IngridaVob

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


The most difficult part was centering the border-box of the QR code preview card. I achieved it using the margin and padding properties, as well as pseudo-classes ::before and ::after. However, there might be a better way to achieve this?

Community feedback

@NikNT

Posted

Hi @IngridaVob,

If you are facing problem in centralizing the content, try using Flexbox. It is the most elegant and simple way to centre the content in such simple layouts.

All you have to do is create an outer div and an inner div. By setting flex properties on the outer div, you will be able to simply centre all the elements.

You can try reading the below given article from CSS Tricks to learn more about flexbox and implement it.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Or you can try going through the video, get a grasp of the concept and then implement.

https://youtu.be/phWxA89Dy94?si=tpA_X7Cyyq49txcR

I truly believe having flexbox in your skillset would definitely allow you to create layouts in a more efficient manner.

Let me know if you need any kind of help on this.

Thanks,

NT

Marked as helpful

0

@IngridaVob

Posted

@NikNT Thank you so much!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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