QR Code component with CSS flexbox

Community feedback

• 

  T

  Chamu•13,130

  @ChamuMutezvaPosted 11 months ago

  • the body is usually set to min-height: 100vh , I would go on and say that should be the best practice.
  • the image should have an alt value, it seems to me to carry a message. The message could be something like alt="QR code for Frontend mentor"
  • landmark elements are one of the building blocks of a website, this challenge should at least have the main element.
  • for font sizes , it is recommended to use rems - using px values is not recommended. See the following article for further explanation. Why font-size must NEVER be in pixels

  Happy coding

  Marked as helpful

  1

  ---

  

  vcgmchen•10

  @vcgmchenPosted 11 months ago

  Hi Chamu, thanks for the feedback.

  Regarding landmark elements, would you suggest that I change <div class="card" to <main class="card">? Or is it better to subsume the div into a main element entirely? As in:

  <main> 
    <div class="card">
       ...
    </div>
  </main>
  

  0

  

  T

  Chamu•13,130

  @ChamuMutezvaPosted 11 months ago

  @vcgmchen

  Hi.

  The first option is perfect. Change the div to <main class="card">

  0
• 

  John Carruthers•310

  @techyjcPosted 11 months ago

  vh doesn’t take into account address bar in mobile browsers or non floating scroll bars. There is the dvh option dynamic viewport height sizing but it lacks full browser support. The video below covers sizing containers and then use flexbox Justify-content and aligh-items to center the Flexbox content.

  This YT video might help… (https://youtu.be/-sF5KsEo6gM?si=vpMXHedXC4cfjVP7)

  Marked as helpful

  1

  ---

  

  vcgmchen•10

  @vcgmchenPosted 11 months ago

  Hi John, thanks for the feedback and bringing my awareness to dvh. I used 98vh to account for around desktop address bar but didn't consider the size of address bars in mobile. Looks like dvh is a good solution to this.

  1