QR-code-component using FLEXBOX

Community feedback

• 

  Ecem Gokdogan•9,380

  @ecemgoPosted over 1 year ago

  Some recommendations regarding your code that could be of interest to you.

  • When you use flexbox in the body, you don't need to use flexbox in the .box to center the card because it doesn't work
  • If you use max-width instead of width, the card will be responsive
  • I adjust the padding a little bit

  .box {
    /* display: flex; */
    /* flex-direction: column; */
    /* align-items: center; */
    /* width: 390px; */
    max-width: 300px;
    /* padding-bottom: 35px; */
    padding: 1.2rem 1.2rem 2rem;
    /* border: 0.5rem; */
  }
  

  • In addition to that above, in order to make the card responsive and the image positioned completely on the card, you'd better add width: 100% and display: block for the img in this way:

  img {
    /* max-width: 100%; */
    width: 100%;
    display: block;
    border-radius: 0.7rem;
  }
  

  • You don't need to use width for .description because it prevents to make the card responsive if you use it

  .description {
    /* width: 265px; */
  }
  

  Hope I am helpful. :)

  Marked as helpful

  1

  ---

  

  magname•60

  @magnamePosted over 1 year ago

  @ecemgo Thanks for your recommendation I have already updated my code

  • Updated the max-width
  • Updated the padding
  • Updated the img tag

  As for the width in the description, I gave that to break the description into three lines😅 as per the design of the challenge.

  0
• 

  Panji•2,090

  @pperdanaPosted over 1 year ago

  Hello there👋!! Congratulations on completing this challange.

  • I have some additional recommendations for your code that I think you'll find interesting and valuable.

  📌 Image element do not have alt attributes or you leave it blank

  for example code

  <img src="images/image-qr-code.png">

  In this code you should add alt in your code

  <img 
    src="images/image-qr-code.png"   
    alt="qr code"
  >
  

  • This alt attribute provides alternative text for images, which is important for accessibility purposes. Screen readers, use the alt attribute to read out loud what the image is about, allowing visually impaired users to understand the content of the page.

  I hope you found this helpful! 😊

  Happy coding🤖

  Marked as helpful

  0

  ---

  

  magname•60

  @magnamePosted over 1 year ago

  @Panji200 Thanks for your review

  I have already updated the code and provided the alt for the image

  <img src="images/image-qr-code.png" alt="QR code">

  0
• 

  Fer•3,970

  @fernandolapazPosted over 1 year ago

  Hi 👋, I leave this here in case you want to take a look:

  HTML 🧱, ACCESSIBILITY ⚖:

  🔹The main content of every document (the whole card in this case) should be wrapped with the <main> tag. And it caught my attention that you gave the 'heading' class to the first line of text but you used <p>, doesn't it seem more appropriate to use an <h1>?

  🔹The image is meaningful and therefore the alt text should give a good description in case the user cannot see it for some reason. An empty alt attribute is the way to set an image as decorative, which will be ignored by a screen reader.

  CSS 🎨

  🔹Length units such as pixels may not be the best alternative because screen sizes and user preferences vary, and absolute units don’t scale. Relative units like em or rem are a better option for scalable layouts (the page will adjust to the user's browser settings) and maintenance (to make changes without having to adjust every pixel value).

  If you find this hard to get used to, you can simply start by using rem (1rem = 16px), it's just a matter of habit.

  🔹You don't need to use font-weight for the description as 400 is the default value for normal font.

  Please let me know if you disagree with something or if you would like more information on any of these topics.🙂

  Regards

  Marked as helpful

  0

  ---

  

  magname•60

  @magnamePosted over 1 year ago

  @fernandolapaz Thanks for your review I have already updated my code

  • As for the heading there is no hard and fast rule that it should always be <h1> I used the p tag to style the heading.
  • Updated the alt tag <img src="images/image-qr-code.png" alt="QR code">
  • Removed the font-weight for the description as 400 is the default font-weight

  Thanks again for the Units reference. I will keep in mind to use relative units more

  0