Responsive QR code page with css

Community feedback

• 

  Lucas 👾•104,400

  @correlucasPosted over 2 years ago

  👾Hello Baran, congratulations for your solution!

  Your component is perfect, but there are some design elements that are a little bit off.

  See my tips below:

  THE BACKGROUND COLOR

  background-color: var(--light-gray);

  THE CORRECT BORDER-RADIUS

  .main {
      border-radius: 12px;
  }
  

  THE CORRECT ALIGNMENT

  body {
      min-height: 100vh;
      justify-content: center;
      align-items: center;
      display: flex;
  }
  

  Hope it helps and happy coding!

  Marked as helpful

  0
• 

  PhoenixDev22•16,950

  @PhoenixDev22Posted over 2 years ago

  Hi @baranyesilaltun,

  Congratulation on completing your first frontend mentor challenge. your solution looks great. I have some suggestions regarding your solution if you don’t mind:

  • Use the <main> landmark to wrap the card. HTML5 landmark elements are used to improve navigation experience on your site for users of assistive technology.

  • Page should contain <h1>. In this challenge , as it’s supposed to be a part of a whole page, you may use<h1>with sr-only class hidden visually and present for assistive tech users. And then use <h2> for .up-info .

  • Never use <div> alone to wrap a meaningful content. Just keep in mind that you should usually use semantic HTML in place of the div tag unless none of them (the semantic tags) really match the content to group together.* By adding semantic tags to your document, you provide additional information about the document, which aids in communication. You can use <p> for the class="bottom-info"

  • The alternate text should not be hyphenated (human readable). It should indicate where the Qr code navigate the user : like Qr code to frontend mentor

  CSS:

  • Consider using min-height: 100vhto the body, that will let the body grows taller with the component outgrows the visible page.

  • Consider using rem for font size .If your web content font sizes are set in absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. Relative units “stretch” according to the screen size and/or user’s preferred font size, and work on a large range of devices.

  • width: 300px;an explicit width is not a good way. consider using max-width to the card inrem instead.

  • height: 470px; It's not recommended to set height to component, let the content of the component define the height.

  • Using percentages for widths, using max-width and avoiding to set heights for the components , with these things is the key to mastering responsive layouts.

  Aside these , Good work! Hopefully this feedback helps

  Marked as helpful

  0