Skip to content
Submitted 7 months ago

HTML & CSS

Khaled Elorbany•30
@KhaledElOrbany
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

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

I was not sure that I could do it purely with only css and html, but I did :D

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

to write all the code myself with what I learned, without the help of copilot.

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

None.

Community feedback

  • Carina•150
    @cfcmeirelesPosted 7 months ago

    Great job with your solution! I noticed your component was not centered to the page on desktop, this is because you're using a set width of "max-width: 1440px", try replacing that with "width: 100%" and it should be fixed!

    0
    Khaled Elorbany•30
    @KhaledElOrbanyPosted 7 months ago

    @cfcmeireles Thanks for your reply, I was confused with the task requirements when they mentioned that Desktop: 1440px, that is why I made it this way, but I guess I will change it to 100% as you said.

    1
    Carina•150
    @cfcmeirelesPosted 7 months ago

    @KhaledElOrbany that was for media query usage for responsive design. You can learn more about it here:

    • https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries
    • https://www.w3schools.com/css/css_rwd_mediaqueries.asp

    Hope this helps!

    1

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