Flexbox to center

Community feedback

• 

  Abdul Khaliq 🚀•72,380

  @0xabdulkhaliq

  Posted about 2 years ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

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

  ---

  HEADINGS ⚠️:

  • This solution consists incorrect usage of <h2> so it can cause severe accessibility errors due to incorrect usage of level-two headings <h2>

  ---

  • Every site must want only one h1 element identifying and describing the main content of the page.

  ---

  • An h1 heading provides an important navigation point for users of assistive technologies, allowing them to easily find the main content of the page.

  ---

  • In this solution there's <h2> element which is this <h2>Improve your...</h2>, you can preferably use <h1> instead of <h2>. Remember <h1> provides an important navigation point for users of assistive technologies so we want to use it wisely

  ---

  • So we want to add a level-one heading to improve accessibility

  ---

  • Example: <h1>Improve your front-end skills by building projects</h1>

  ---

  • If you have any questions or need further clarification, and feel free to reach out to me.

  ---

  • If you have any questions or need further clarification, you can always check out my submission and/or feel free to reach out to me.

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  01

  Marked as helpful
• 

  Nutchapon Makelai•270

  @kodaicoder

  Posted about 2 years ago

  Hi Vashinator, congratulations on completing a challenge 🎉 it's look good so far in desktop and mobile.

  The point you need to fix on the project is when the page is rendering on tablet device

  first my suggestion on placing a object on the center of the page try using

  body{
    height:100vh;
  }
  
  .container{
  display: gird;
  place-content: center;
  }
  

  and you can using 'container' class as a wrapper for your content BTW another suggestion is I need you try to checking on a padding and margin of the content of the card.

  Keep Practice , Keep Learning

  01
• 

  Saad Hisham•1,770

  @Saad-Hisham

  Posted about 2 years ago

  I feel that I need to explain more about vw and vh in the previous comment vw stands for "viewport width", and vh stands for "viewport height". They are both relative units of measurement that allow you to size elements based on the dimensions of the viewport, which is the visible portion of the browser window.

  1vw represents 1% of the viewport width, and 1vh represents 1% of the viewport height. So, for example, if the viewport is 1000 pixels wide and 600 pixels high, 1vw would be equal to 10 pixels and 1vh would be equal to 6 pixels.

  01
• 

  Saad Hisham•1,770

  @Saad-Hisham

  Posted about 2 years ago

  Great work! 👏 I noticed that the margins and padding of your website could use some tweaking, and the center element could be positioned more accurately. Here's a quick and easy fix:

  First, set the width and height of the body element to 100vw and 100vh, respectively. This will make sure the body element takes up the entire viewport.

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

  That's all! With these changes, your center element should be perfectly positioned in the middle of the screen. You can play around with the margin and padding properties to achieve the desired look.

  Keep up the great work and happy coding! 💖

  00
• 

  Fin Tatum•150

  @tdtatum2

  Posted about 2 years ago

  Hi there Vashinator!

  I wanted to share some knowledge with you that was shared with me when I submitted this same project.

  Because you have your body set to a width of 1440px or 375px when at 480px screen width of below, your QR code component can oftentimes be off screen on certain screen sizes. Instead, try setting body min-height to 100vh and utilizing either flexbox utilities to align the component in the center of your page or CSS grid utilities to place-items center!

  Also, here is a great article on box-shadows if that helps you understand it a bit better: Mozilla Box Shadows.

  In case this is useful to you, I was also pointed in the direction of this amazing CSS Reset that you can use to nullify a lot of annoying default CSS values to take control of your design.

  Lastly, while it's only 4 lines here, I think (I could be wrong) that it is better to remove unused CSS just to increase page loading speed. Again, it's probably rather inconsequential here, but it can definitely matter when you get into larger file sizes and more and more unused CSS.

  Overall, I still think you did a great job!! I hope some of my tips help, and I wish you luck in completing more challenges!! :)

  01