All comments

• 

  Vladimir•160

  @VladmidirSubmitted almost 2 years ago

  Could not figure out how to center it vertically without adding a margin.

  

  QR code component using flex

  2

  40
  

  Konstantin Shuvalov•170

  @ShuvalovrusPosted almost 2 years ago

  Hi, good job, your wrap element is not centered because the height of main does stretch to the content, so in order for the align-items property to work, you need to set the min-height of main to 100vh, like this:

      main {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-family: 'Outfit', sans-serif;
        min-height: 100vh;
      }
  

  Marked as helpful

  2

  This comment has received 1 replyShow
• 

  Udo Nsisong•10

  @Junior4jSubmitted almost 2 years ago

  I loved the experience coding the page. I didn't have any sort of difficulty while building. Thanks for such a great experience

  

  QR-Code Component using HTML & CSS

  1

  10
  

  Konstantin Shuvalov•170

  @ShuvalovrusPosted almost 2 years ago

  Hi great job, but for the image to be displayed, specify the correct path to the image in the src attribute of the img tag. After all the image is in the images folder the path should look like this :

  <img src="./images/image-qr-code.png" alt="qr-code">
  

  or

  <img src="./image-qr-code.png" alt="qr-code">
  

  I advise you to delete the image that you have in the root folder and leave only the one in the images folder and specify the path I suggested first.

  I hope my advice helped you. Good luck in the future

  Marked as helpful

  1

  This comment has received 1 replyShow
• 

  Pedro Celeste•130

  @Pedro-CelesteSubmitted almost 2 years ago

  Hey!

  Do you know a better way to center elements on a page than the one I used?

  I explained how I did it in the README.md file.

  Thanks!

  

  Centering Elements using Transform: Translate()

  4

  20
  

  Konstantin Shuvalov•170

  @ShuvalovrusPosted almost 2 years ago

  In this case I would not bother, you can set body property display: flex; with justify-conent:center; and align-items: center;

  html, body {
      min-height: 100vh;
  }
  body {
      background-color: hsl(212, 45%, 89%);
      font-family: "Outfit", 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  

  Read more here - How to center

  1
• 

  mosesanidugbe•140

  @Moses-anidugbeSubmitted almost 2 years ago

  

  huddles landing page #2

  2

  10
  

  Konstantin Shuvalov•170

  @ShuvalovrusPosted almost 2 years ago

  Hi there 👋. Good job on completing the challenge ! @Moses-anidugbe These errors appear because you are using fontawesome.com for icons, the thing is that when you plug in the fontawesome script it creates its own styles for icons in html, try using: - IcoMoon or Ionicons as described in the task.

  Marked as helpful

  0
• 

  Ikenna Oguejiofor•540

  @ikennarichardSubmitted almost 2 years ago

  Pls why does the hamburger .menu_icon translate function work with "this" but dosen't work with "e.target" ? I thought they both refer to the element

  

  Flex-Grid Intro section with dropdown nav

  2

  30
  

  Konstantin Shuvalov•170

  @ShuvalovrusPosted almost 2 years ago

  Colback takes a single parameter based Event describing an event that happened. So that we can use e.targer, we need to rewrite the code like this

  menuIcon.addEventListener('click', menuSlide);
  

  function menuSlide(e) {
      e.target.classList.toggle('change');
      cover.classList.toggle('show_cover');
      extraLayer.classList.toggle('show_cover');
  }
  

  Marked as helpful

  1