Hibiscuit0 Newbie QR code component

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hi @Hibiscuit0, congratulations on your first solution!👋 Welcome to the Frontend Mentor Coding Community!

  Great solution and a great start! From what I saw you’re on the right track. I’ve few suggestions for you that you can consider adding to your code:

  1.Use <main> instead of <div> to wrap the card container. This way you show that this is the main block of content and also replace the div with a semantic tag.

  2.Clean your code by removing some unnecessary divs, most of the content can stand alone without a div. Use div only for blocks that need a special alignment or the content needs a special positioning.

  3.Add a margin of around margin: 20px to avoid the card touching the screen edges while it scales down.

  4.Fix the component responsiveness, its not working yet and this is due the fixed width you've applied to the container. The difference between width and max-width is that the first(width) is fixed and the second(max-width) is flexible and make the element shrink when the screen starts to scale down. So if you want a responsive block element, never use width choose or min-width or max-width.

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0
• 

  Joshua Hellard•545

  @jhellardPosted about 2 years ago

  Assuming your container is 100% of the height/width you can use display: grid and place-items: center to center is all very easily. The method you used is not bad however, there is just better ways now.

  Marked as helpful

  0
• 

  Mauger•210

  @mauger1998Posted about 2 years ago

  Hi I took a quick look at your style sheet, you should center the card by using flexbox... make the element that the card is in a flex container by putting display:flex; on it then all its children become flex items, then you can use justify-content:center; to center it on the main axis and align-items:center; to center it on the cross axis, I hope this helps

  Marked as helpful

  0
• 

  Hibiscuit•30

  @Hibiscuit0Posted about 2 years ago

  Thanks a lot @Mauger1998 @jhellard and @correlucas for the advices.

  I've seen that for accessibility, I should have used semantic tags --> I'll try to take this into account for each new challenge. I don't know yet the grid --> I'll try !

  The difference between width and max-width seems to be important to know, so thanks for the explanation.

  Next time I can work on it, I'll correct my code to fit your advices.

  0