Desktop HTML & CSS

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted 11 months ago

  Hello there 👋. Good job on completing the challenge !

  I have some suggestions about your code that might interest you.

  • Enhance accessibility by utilizing semantic elements like <main> and <footer>.

  • Provide an alt attribute for the QR code image, explaining its purpose, e.g., QR code to frontendmentor.io.

  • Use relative units (em or rem) for font-size instead of absolute pixels. Learn more here 📘.

  • Choose min-height: 100vh over height to prevent cutoff on smaller screens, like mobile phones in landscape orientation.

  I hope you find it useful! 😄 Above all, the solution you submitted is great!

  Happy coding!

  1

  ---

  

  Nira•130

  @dhafindzahinPosted 11 months ago

  @MelvinAguilar Thanks for the suggestion, I have some question

  • Should I put everything in <main>? Because I feel like everything should be put on main. As for the <footer>, I don't see anything that would be tradionally put inside <footer>.
  • Can you explain why min-height: 100vh work differently from height: 100vh. A link to a site that explain it is also fine.

  0

  

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted 11 months ago

  @dhafindzahin Hi again

  You can change the card roundness to the main element, and regarding the footer, I made a mistake. I thought you had uncommented the <div class="attribution"> part. My apologies for the confusion.

  As for the height, using height applies a fixed value that will never change; it will always be 100vh. However, this result in a problem: on mobile devices, if you activate landscape orientation, your card will be much larger than 100vh. What will happen is that your card (your content) will overflow the container and hide at the top.

  I've attached a photo to illustrate: https://i.imgur.com/czs9GeY.png. In the photo, you can see the problem – the image is cropped, and I haven't scrolled, so it's hiding due to the use of height: 100vh.

  By using min-height, you allow it to have those 100vh but if the content grows, it can adapt to the content, preventing distortion on mobile devices.

  0

  

  Nira•130

  @dhafindzahinPosted 11 months ago

  @MelvinAguilar Alright, thanks for the tip 👌

  0