QR code first solution using CSS Flexbox

Community feedback

• 

  Jacob Stone•130

  @jacob-stone9554Posted 6 months ago

  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-RamPosted 6 months ago

  @jacob-stone9554

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

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

  1
• 

  Dustin Knie•210

  @nullpuppyPosted 6 months ago

  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-RamPosted 6 months ago

  @nullpuppy thanks brother. I'll check it .

  1