QR page on a web page

Community feedback

• 

  Boris•2,850

  @mkborisPosted 3 months ago

  Hi @cas1092 great job completing your first challenge, here are a few things to review

  • To properly center the card, use Flexbox on the body rather than transform and margins on the container. Add this to the body and remove the transform and margin properties from the .container

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

  • Avoid setting fixed 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 and prefer relative units like rem for better adaptability. Update the .container width to use max-width and should be defined in rem.
  • Change the img width to max-width: 100%; This as well as other reset styles is included in CSS reset you should use at the start of the styles in every project. This will help reset a list of default browser styles.
  • Your image is missing an alt attribute like so alt="Qr Code to Frontendmentor.io"
  • All content should be wrapped within landmarks. Wrap a footer tag around the .attribution
  • It's best practice linking Google fonts directly in the HTML head section rather than directly in your CSS file as it enables asynchronous downloading, improving page load times.

  0

  ---

  

  Lorena Castillo Goche•170

  @cas1092Posted 3 months ago

  @mkboris Thanks! i knew there was a better than modify the margins, i was playing with numbers that made sense for my solution.

  0