Submitted 5 months ago

HTML & CSS

Khaled Elorbany• 30

@KhaledElOrbany

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

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

@cfcmeireles

Posted 5 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!

Khaled Elorbany• 30

@KhaledElOrbany

Posted 5 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.

Carina• 150

@cfcmeireles

Posted 5 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!

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