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 first solution using CSS Flexbox

Onlyy-Ram 20

@Onlyy-Ram

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 still got issues with strengthening my skills !!

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

the hardest thing for me is design. and by doing this project i gained much deeper understanding of how to solve your solutions in the shortest-yet productive way.

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

i still have this diziznes over making website responsive. even though i know how to set all the properties. can someone please help me how to make it should work ?

Community feedback

@jacob-stone9554

Posted

Hi Ram! Overall, this is a great start to the solution!

I do believe that it could be improved upon in a few ways to get it closer to the original design.

In your body styles, you could try background-color: hsl(212, 45%, 89%); instead of background-color: hsl(220, 15%, 55%); in order to achieve the background color designated in the design.

Additionally, you could import a Google font to use in your solution. This one recommends "Outfit" which can be found here with instructions on how to embed it on that page as well.

As far as making the design responsive, you have a great start by including a media query. One thing you could try is removing the body rule from inside that query as it should be applied globally, and really doesn't need to change depending on the size of the viewport. Inside the .container rule you could try setting the height and width attributes to a set percentage like 75% or 80% instead of the full size of the viewport.

One final note, although this is a relatively small solution it would still be good to include semantic HTML. Tags like <main>, <nav>, <section> and so forth.

I hope this helps! Let me know if you have any questions, happy coding :)

Marked as helpful

0

Onlyy-Ram 20

@Onlyy-Ram

Posted

@jacob-stone9554

heyy Jacob, thanks for the feedback!! it's understandable now.

i'd love to hear from u again buddy :)

1

@nullpuppy

Posted

I'm still learning the ins and outs of responsive design as well, so I, unfortunately can't provide much help there at the moment. That said, looking at the code, a couple things come to mind based on what I can into while implementing myself.

Your container is only styled in your @media query and I don't think it's working as expected. If you look at the design, the width of the card is 320px, and the QR code is around 288px. I'd recommend updating the styling to enforce those sizes more explicitly.

Also, it looks like you're not actually loading the Outfit google font. If you go to https://fonts.google.com/specimen/Outfit and look at the upper right corner, there's a button to Get font, which then loads another page with an option to download or Get embed code. Checking that out more closely should help you out.

0

Onlyy-Ram 20

@Onlyy-Ram

Posted

@nullpuppy thanks brother. I'll check it .

1

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