QR code component solution with Flexbox

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hello Natasha Pierre-Louis, congratulations for your first solution! 👋 Welcome to the Frontend Mentor Coding Community!

  Answering your question:

  These values Mobile: 375px / Desktop: 1440px is only a reference to say in which resolution the design were created. If you set these widths your design will be not responsive since you set these sizes, use these values only to know how will be the breaking points and to compare the solutions, remember that your solution will be opened in different screens.Something you can keep in mind to add for your next solution is to use relative units as rem or em instead of px to improve your performance resizing fonts between different screens and devices.I saw that you’ve used id to give the styling for your component, its not a good idea because id its a too much specific selector used for forms and Javascript code. Instead, use class for styling and let the id for much specific stuff.

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  1

  ---

  

  Natasha Pierre-Louis•280

  @natashaplPosted about 2 years ago

  @correlucas Thank you and it's good to know! I'll keep that in mind for future code challenges.

  1
• 

  Hyron•5,870

  @hyrongennikePosted about 2 years ago

  Hi @natashapl,

  Congrats you did good. You can make the following changes to the #root selector to get the background to cover the entire viewport and for the card to be centered:

  #root {
      background: hsl(212deg, 45%, 89%);
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      margin: 0 auto;
      position: relative;
  }
  

  You can also do a margin: 0; on your body tag to remove white line around the edge. Let me know if you have any other questions.

  Marked as helpful

  1
• 

  Natasha Pierre-Louis•280

  @natashaplPosted about 2 years ago

  Hi Hyron. Thanks for the tip. I actually purposefully made the root max-width 1440px per the style-guide:

  Layout

  The designs were created to the following widths:

  • Mobile: 375px
  • Desktop: 1440px

  Since I may have misunderstand the requirement, I went ahead and updated my code. Thanks again for the feedback!

  1

  ---

  

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  @natashapl Hi Natasha, I can relate! This was exactly what I did for my first 10 solutions or so, as in, I only made the component optimal at the two widths. I think the instructions can be clearer, as they can be interpreted differently. In any case, glad you completed your first challenge, and also, welcome to Frontend Mentor! 😊

  Marked as helpful

  2

  

  Natasha Pierre-Louis•280

  @natashaplPosted about 2 years ago

  @elaineleung Thanks! Glad to know I wasn't the only one who found that a little unclear. That's why I appreciate these types of feedback. There's always an opportunity to learn something new.

  1

  

  Hyron•5,870

  @hyrongennikePosted about 2 years ago

  Hi @natashapl as @elaineleung mentioned the instructions are sometimes not clear you should also follow you own instincts in some cases once you do the basics that the challenge requires do something extra this is all for you to practice and learn.

  2