Responsive QR Code Component Webpage using FlexBox

Community feedback

• 

  P

  Øystein Håberg•10,410

  @Islandstone89Posted 12 months ago

  Hello, here is my feedback:

  HTML:

  • You need a <main> - change .container from <div> to <main>.

  • The image needs alt text, to make it understandable for screen readers. It should be descriptive, and here it also needs to say where it leads (frontendmentor.io).

  • Remove the inline style in the heading.

  • Remove the <br> tags. You shouldn't force the lines to wrap like that. If you need to adjust spacing, etc, do it in the CSS.

  CSS:

  • As mentioned, all styling should be done in a separate CSS file, usually called "style.css", and not in the HTML.

  • Add a good CSS Reset at the top.

  • Remove width: 100% on .container - it is a block element, and so it is 100% wide by default.

  • height should be min-height.

  • Remove the fixed width on .qr-container. It's very rare that you want to set fixed widths or heights, except for things like icons.

  • Add a max-width of about 20rem on qr-container, to prevent the card from getting too big at larger screens.

  • Put text-align: center on the .container.

  • Font-size must never be in px. Use rem instead. Using px will immediately make your page inaccessible.

  • Remove width on image, and add max-width:100% and display: block. This is also included in the mentioned CSS Reset.

  • Use padding on .qr-container to create space between the image and the edge of the card. Remove the padding on the image itself.

  Good luck :)

  0