QR code component Using FlexBox

Community feedback

• 

  Boris•2,850

  @mkborisPosted 3 months ago

  Hi Prototype-113322 congrats on completing your first challenge you did great, here are a few things to review

  • All content should be wrapped within landmarks. Wrap a main tag around the .container-flex and a footer for the attribution.
  • Every page should have at least one heading element typically an h1 element to provide a clear structure. The p with the class of .heading should be a heading element
  • Your image is missing an alt attribute like so alt="Qr Code to Frontendmentor.io"
  • Font-size should be written in rem not px
  • Consider using a modern CSS reset at the start of the styles in every project. Like this one Modern CSS Reset. This will help reset a list of default browser styles.
  • Avoid setting fixed heights and widths on elements, as this can create problems with responsiveness and content fit. Instead, let the content and padding determine the element’s size. If necessary, use max-width or min-height, and prefer relative units like rem for better adaptability. Change the width of the .content to max-width and it should be defined in rem. Remove the heights from the .container-flex and .content and add this on your body to properly center the card

      min-height: 100vh;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      gap: 1rem;
  

  Marked as helpful

  0