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 component using flexbox

Suman Das 10

@webdevsuman

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


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

I shall first set the size of the object and then try to center it.

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

I have learnt to center an object by using width and flexbox. I was previously doing that using margin. But that was not responsive.

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

In mobile when I turn screen to landscape mode, footer gets in the middle. Please help me getting it at the bottom of the page.

Community feedback

P

@2XG-DEV

Posted

Nice Attempt!

But your content is not centered, you can use display flex and align items center and justify center on a div surrounding all of the content.

Also you did not use the right font, you can see all that if you open the design in figma, and you can use a simple @import in your css to get the font from google fonts.

Marked as helpful

0

Suman Das 10

@webdevsuman

Posted

Thanks for the feedback. I have now centered the content. Its showing slighly up in the screenshot due to the footer.

About the font, I am using the right one. I have added it through <link> in my html file and in css: body{font-family: "Outfit", sans-serif; } is mentioned. For the heading I am using <h3> tag instead of the <h1>.

@2XG-DEV

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