Skip to content
Submitted 7 months ago

Responsive QR Code Using HTML and CSS

Stephengrammy•60
@Stephengrammy
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

Thanks to using the positioning selector in CSS I was able to center the content and make it responsive on all platforms so that helped me skipped the need of writing media query code

What challenges did you encounter, and how did you overcome them?

First off I had issues with aligning my main-container div to the center of the page I had to look up the best way to position it on and what i found worked like a magic and it made the page responsive on all platforms .

Secondly getting the perfect width for the image was a little bit tough I had to try a lot number in px and % .

Padding too was something i had to retry a couple of time cause the sub-container div was gluing to the side of the main-container div

What specific areas of your project would you like help with?

I would love see someone else CSS code and how they structured it

I definitely don't know to use figma and i was unable to open the figma design tried importing to the figma app but got an error message saying file is unsupported

Code

Please log in to post a comment

Log in

Community feedback

  • lazyneedle•60
    @Iamnotn3rd

    use :root pseudo class style to make global css variables. that'll help a lot with various color. also use text-align: center to make main content to be aligned in the center.

    Marked as helpful
  • P
    RogeanCosta•200
    @RogeanCosta

    I just learned from your code a new way to center a container totally in the center, I had never thought of this possibility of using absolute positioning 😮.

    I recently did this challenge too, and I used the tactic of defining a container with a dimension smaller than that of the parent container, the body in this case (which seems obvious when looking at the design provided) and using margin-left and margin-right in auto. Having both in auto, makes them both have the same size and then the container is centered horizontally, however, I couldn't figure out what to do vertically 😅. I did something like:

    .main-container {
width: 280px;
margin: 50px auto;

    There is also a simple way to center with flexbox, but I believe that this already involves responsive design and is outside the scope of the challenge 🤔.

    By the way, about the .fig provided, I was able to open it in Figma online by dragging it onto the website, WITHOUT HAVING ANY PROJECT OPEN, just on the drafts screen. I don't usually use the application, so I can't give you information on how to proceed, but check if you can open it on the website, the design they provided was a great help to me. ✌

    Congratulations for the result! 😁

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