QR Code Solution Rachel

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  Replace<div class="card-container">with the main tag and <div class="attribution"> with the footer tag to fix the accessibility issues. click here for more on web-accessibility and semantic html

  There is no need to give the body a width and height value

  To center .card-container on the page using flexbox or grid, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.

  To center .card-container on the page using flexbox:
  body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  }
  

  To center .card-container on the page using grid:
  body{
  min-height: 100vh;
  display: grid;
  place-items: center;
  }
  

  Giv .desc a margin value for all the sides, text-align: center and a font-size of 15px which is 0.9375rem, this will be the font-size of both p and h1.

  Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  1

  ---

  

  Red•150

  @RachelikPosted almost 2 years ago

  @Hassiai Thanks! I have made the changes. From the screenshot comparison, the font-size for h1 is about 22px (1.375em). Grid was working as fine as flexbox.

  0
• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hello 👋. Congratulation on successfully completing your first challenge 🎉 ! !

  I have some recommendations regarding your code that I believe will be of great interest to you.

  HTML 🏷️:

  • Use semantic elements such as <main> and <footer> to improve accessibility and organization of your page.

  CSS 🎨:

  • Instead of using pixels in font-size, use relative units like em or rem. The font-size in absolute units like pixels does not scale with the user's browser settings. Resource 📘.

  • The width: 100% property in the body tag is not necessary. The body tag is a block element and it will take the full width of the page by default.

  • To center the component in the page, you should use Flexbox or Grid layout. You can read more about centering in CSS here 📘.

  body {
      background-color: hsl(212, 45%, 89%);
      font-family: 'Outfit', sans-serif;
      font-size: 15px; /* NOTE: Convert to rem o em */
      /* height: 100%; */
      /* width: 100%; */
      /* NOTE: Using flexbox to center the component */
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
  }
  
  .card-container {
      /* margin: 150px auto 0px auto; */
     . . .
  }
  

  CSS Reset 🔄:

  • You should use a CSS reset. A CSS reset is a set of CSS rules that are applied to a webpage in order to remove the default styling of different browsers.

    CSS resets that are widely used:

    • Reset CSS
    • "My Custom CSS Reset" by JoshWComeau

  I hope you find it useful! 😄 Above all, the solution you submitted is great!

  Happy coding!

  Marked as helpful

  1

  ---

  

  Red•150

  @RachelikPosted almost 2 years ago

  @MelvinAguilar Thanks. I have make the changes. These are really good improvements.

  0