QR Code

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted over 2 years ago

  Hi

  I'm afraid I see quite a few issues with this. Hopefully these pointers will help

  1. Use a basic css reset at the start of every stylesheet. That will remove different browsers styles and reset things like margin on the body

  2. don't use huge margins to try and create a layout. If you need to center a component on the screen as with this design, use flex properties in combination with min-height: 100vh on the wrapper.

  3. Use landmark elements. That's things like main, header and footer. In this .container should be a <main> element, and the attribution should be in a <footer> element.

  4. Do not set explicit width on the card. Instead, use max-width so it can grow up to a point, but shrink down on smaller screens if it needs to. It is overflowing my mobile screen at the moment.

  5. Inside the card, you should be using padding. That is for internal space, keeping contents away from the component edges. Same padding all around.

  6. The image should be display block (also usually done in a css reset) and width/max-width 100%. Again, the padding in the card will keep it from hitting the edges.

  7. The image alt text needs to say the QR code destination as well. QR code to... where?

  8. Why are you using a h3 on this? That might be fine if you are imagining this component to sit at a certain level on a page, but I wonder if you've chosen that just because it feels about the right size(?). That is not what heading levels are for. Set the size you want in css, but heading levels are the most important things that give web pages content structure. Headings must go in order and show what content belongs to what

  9. Again, a CSS reset would sort this for you: Set the exact vertical margins that you want on headings and paragraphs. Don't rely on the browser defaults as these can vary a lot between browsers.

  Marked as helpful

  0