Qr code component main using a container div for the image and content

Community feedback

• 

  Ecem Gokdogan•9,380

  @ecemgoPosted over 1 year ago

  Some recommendations regarding your code could be of interest to you.

  HTML

  In order to fix the accessibility issues:

  • You need to replace <div class="container"> with the <main class="container"> tag. You'd better use Semantic HTML, and you can also reach more information about it from Using Semantic HTML Tags Correctly.
  • Each main content needs to start with an h1 element. Your accessibility report states page should contain a level-one heading. So, you should use one <h1> element in the <main> tag. You can replace your <h2>Improve your front-end skills by building projects</h2> element with the <h1>Improve your front-end skills by building projects</h1> element.

  After committing the changes on GitHub and you need to deploy it as a live site. Finally, you should click generate a new report on this solution page to clear the warnings.

  CSS

  • In order to center the card easily and correctly, you can add min-height: 100vh to the body

  body{
    min-height: 100vh;
  }
  

  • You don't need to use margin in the .container because you've used flexbox in the body to center the card, you can remove it. Additionally, flexbox you used in the .container doesn't work so you can remove it as well.
  • If you want to make the card responsive, you can use max-width instead of width

  .container {
      /* display: flex; */
      /* flex-direction: column; */
      /* justify-content: center; */
      /* align-items: center; */
      /* margin: 100px auto; */
      /* width: 300px; */
      max-width: 300px;
  }
  

  Hope I am helpful. :)

  Marked as helpful

  0

  ---

  

  Apah•280

  @apah-devPosted over 1 year ago

  @ecemgo this is everything I’ve been trying to fully understand Thank you so much for taking the time

  1

  

  Ecem Gokdogan•9,380

  @ecemgoPosted over 1 year ago

  @apah-dev anytime :)

  0
• 

  Sufiyan Ahmed•160

  @sufiyan0Posted over 1 year ago

  In Your project folder you always find style-guide file try to read in and follow the color and font style.

  body{ display: flex; align-items: center; justify-content: center; min-height: 100vh; } use this code to get your component in center of the screen

  Marked as helpful

  0

  ---

  

  Apah•280

  @apah-devPosted over 1 year ago

  @sufiyan0 I'll apply the changes and see the difference. Thanks Ahmed

  0
• 

  Bader Idris•2,880

  @Bader-IdrisPosted over 1 year ago

  You can set the container in the middle of the screen whatever user changes it when you add these properties to it in CSS:

  .container {
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  

  the new feature is transform, it has many lovely properties you can discover, I personally love it. Hope it's useful

  Marked as helpful

  0

  ---

  

  Apah•280

  @apah-devPosted over 1 year ago

  @Bader-Idris Thank you so much. I'm guessing this is responsive no matter the device that views in right?

  0

  

  Ecem Gokdogan•9,380

  @ecemgoPosted over 1 year ago

  @apah-dev if you want the card to be responsive, you can check out what I recommend.

  Marked as helpful

  0

  

  Apah•280

  @apah-devPosted over 1 year ago

  @ecemgo Your recommendations align totally with my thoughts on how to solve the responsiveness and how to keep unnecessary lines of code from the project. I’m still adding things that I may not need as I’m just starting to fully grasp some of the concepts.

  1