Flexbox to center

Community feedback

• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year 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!

  Marked as helpful

  0

  ---

  

  Vashinator•30

  @VashinatorPosted over 1 year ago

  @0xAbdulKhalid Thank you, I definitely have to learn more about which heading, etc. elements are used for what.

  I also updated the main div to be main rather than just div.

  0
• 

  Nutchapon Makelai•270

  @kodaicoderPosted over 1 year 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

  0

  ---

  

  Vashinator•30

  @VashinatorPosted over 1 year ago

  @NutchaponMake Thank you, yes, I ended up adding the margin-top to push it down and didn't even think about vh, which is one of the reasons I'm doing these challenges.

  Out of curiosity, why grid over flex? Just your preference? Edit 2: I just realized you placed it on .container instead of body. I guess you're using grid to display all the elements within .container in the center.

  Edit: additionally, I will look at the margin and padding, one challenge I'm trying to figure out is how to best compare the screenshot to the page I make. I tend to have my page zoomed in, so it makes it tough to figure out the right scale to make the screenshot.

  0
• 

  Saad Hisham•1,750

  @Saad-HishamPosted over 1 year 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.

  0

  ---

  

  Vashinator•30

  @VashinatorPosted over 1 year ago

  @Saad-Hisham Thank you, I agree on the 100vh, but the style guide had: "The designs were created with the following widths:

  mobile: 374px desktop: 1439px"

  Which is why I went the direction I did, probably a misinterpretation on my part. I don't typically see 100vw used.

  0
• 

  Saad Hisham•1,750

  @Saad-HishamPosted over 1 year 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! 💖

  0
• 

  Fin Tatum•150

  @tdtatum2Posted over 1 year 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!! :)

  0

  ---

  

  Vashinator•30

  @VashinatorPosted over 1 year ago

  @tdtatum2 Thanks, on the box shadow, it was more that I wasn't sure on if I picked the right color from the list. I definitely need to play with the values a bit more at some point.

  As for the vh piece, that was also me just misinterpreting the style guide. Since it mentioned those sizes, that's what I did.

  0