QR code component using Flexbox

Community feedback

• 

  P

  Øystein Håberg•10,710

  @Islandstone89Posted 11 months ago

  HTML:

  • You need a <main>, this is important for accessibility. This can also be the card, as we want the structure to be as simple as possible here.

  • You don't need any of the divs, so I would remove those.

  • The image must have alt text! This is essential for screen readers to understand the image. The alt text should be descriptive, and in this example, it also needs to say where it leads (frontendmentor.io).

  • It's common practice to use classes instead of IDs.

  CSS:

  • It's good practice to include a CSS Reset at the top.

  • Do not use font-size: 62.5%.

  • text-align: center should be on the body. Remove it from the <h1> - the heading will inherit the value from the body, so your code is redundant.

  • On the body, remove overflow: hidden and width: 100% - it is a block element, hence it is 100% wide by default.

  • The card's parent should have a min-height instead of a height.

  • Remove the fixed width and height. This includes all of the % widths, too. You rarely want to set fixed dimensions, as this easily creates issues with responsiveness.

  • Add a max-width of around 20rem on the card, to prevent it from getting too wide on larger screens.

  • Remove the footer styles, unless you actually include the <footer> in your HTML.

  • Remove the margin on the card, it is already centered using Flexbox.

  • Add display: block and max-width: 100% on the image - the max-width prevents it from overflowing its container.

  Marked as helpful

  1

  ---

  

  Grooby•90

  @TheGroobiPosted 11 months ago

  @Islandstone89 Thanks you very much! I applied the changes you suggested and uploaded a second solution. The code is way easier to read and understand now. Not sure if i should have so many elements inside the body selector but i guess it works. I just couldn't figure out the exact width and how to make it as close to the design as possible. I really appreciate the help :)

  1

  

  P

  Øystein Håberg•10,710

  @Islandstone89Posted 11 months ago

  @TheGroobi happy to help - well done!

  Quick tip: you can remove flex-direction: row - it is the default value when you declare display: flex.

  1