A simple QR Code using Flexbox

Community feedback

• 

  Mehdi•990

  @siavhnzPosted about 2 years ago

  Hello Dan, congrats on completing first challenge

  About your question Stephanie Eckles has a great article that I used in my challenge today.

  Here's the article link: Keep the footer at the bottom: Flexbox vs. Grid

  Happy coding.

  Marked as helpful

  2
• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hello Dan, congratulations for your first solution! 👋 Welcome to the Frontend Mentor Coding Community!

  You've a great solution and a great start. I've some tips for you: to avoid the accerror you need to add ever one h1 to wrap the main title of the page, I know this is a component but anyways requires one h1. It's better you give a padding-bottom: 40px or use gap: 40px to separate the container from the attribution or use position: absolute to make it get positioned bottom with bottom 0. And reduce the html structure removing unnecessary div, you ca wrap all content in a single div.

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  1
• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted about 2 years ago

  Hi Dan,

  Congratulation on completing your first challenge. Your solution looks great. I have some suggestions regarding your solution if you don’t mind:

  • You should use <footer> for attribution. HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology.

  • Page should contain <h1>. In this challenge , it’s supposed to be a part of a whole page, so to tackle the accessibility issue you may use<h1>with sr-only class hidden visually and present for assistive tech users.

  • In my opinion, the alternate text should indicate where the Qr code navigate the user : like QR code to frontend mentor .

  • Add min-height: 100vh instead of height: 100vhto the body that let the body grows taller if the content outgrows the visible page instead.

  • width:320px;an explicit width is not a good way to have a responsive layout. Consider using max-width to the card in rem instead.

  Hopefully this feedback helps.

  Marked as helpful

  1

  ---

  

  Dan•150

  @igafshellPosted about 2 years ago

  @PhoenixDev22 Thanks for the feedback, it really helps!

  1
• 

  Jonathan Samael•130

  @JonathanSamaelPosted about 2 years ago

  '''How do you make a footer containing some text that sticks to the bottom?'''

  You can use the property: footer { position: absolute; ( To make the footer or div float) bottom: 0; (keeps the element glued down) /* After that, you can centralized. */

  }

  Marked as helpful

  1

  ---

  

  Dan•150

  @igafshellPosted about 2 years ago

  @JonathanSamael thanks, I'll keep that in mind!

  1