QR Code Component ~ Flexbox

Community feedback

• 

  Travolgi 🍕•31,400

  @denieldenPosted about 2 years ago

  Hi Cornflakes, congratulations on completing the challenge! 😁

  Some little tips:

  • use main tag to wrap the card and improve the Accessibility
  • use article or div tag instead of main to the container card

  Great job, you have improved and the code is nice and clean!

  Hope this help! Happy coding 😉

  Marked as helpful

  1

  ---

  

  Cornflakes•290

  @CornflakesPlusPosted about 2 years ago

  @denielden Hey Deniel! Thanks for the Feedback.

  1

  

  Travolgi 🍕•31,400

  @denieldenPosted about 2 years ago

  @CornflakesPlus You are welcome and keep it up 😁

  0
• 

  Miran Legin•680

  @miranleginPosted about 2 years ago

  Hi Cornflakes,

  you did a good job on this example and i could only suggest couple of minor tweaks:

  1. you can try setting display: block; max-width: 100% on image and remove padding: 0 .3rem, first will make sure that the image don't extend beyond the parent element and second will correct wrong aspect-ratio
  2. fine tune line-heights on textual elements to closely match design
  3. remove footer from page flow with position: fixed; bottom: 0 so when you generate your screenshot it will match design even more

  Keep coding! Cheers

  Marked as helpful

  1

  ---

  

  Cornflakes•290

  @CornflakesPlusPosted about 2 years ago

  Hey Miran! Excellent feedback. I loved the Footer part :)

  I'll surely implement and remember this for future projects. Thank you so Much!

  0
• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hi Cornflakes, congrats for your new solution!

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

  Your component is perfect, but is not responsive yet, this is due the fixed width you've applied to the container.

  Look both width and max-width the main difference between these properties is that the first(width) is fixed and the second(max-width) is flexible, for example, a component with width: 320px will not grow or shrink because the size will be ever the same, but a container with max-width: 320px or min-width: 320px can grow or contract depending of the property you've set for the container. So if you want a responsive block element, never use width choose or min-width or max-width.

  Note that there's no need to use height here, because since you set a height for an element, this means that this element will grow until a certain point and after that the inner content (as texts or images) will start to pop out the element due its fixed height, so isn't necessary to set the height the container height comes from the elements, its paddings and height.

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  1

  ---

  

  Cornflakes•290

  @CornflakesPlusPosted about 2 years ago

  Hey Lucas! Thank you for the Feedback. Regarding the width and max-width, I've rechecked my CSS style sheet, and seems like I've used max-width not width. Is there something else you might be referring to?

  1