Skip to content
Submitted 9 months ago

QR code preview card using HTML and CSS

IngridaVob•10
@IngridaVob
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 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

  • Nikhil Tanwar•260
    @NikNTPosted 9 months ago

    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•10
    @IngridaVobPosted 9 months ago

    @NikNT Thank you so much!

    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