Frontend mentor qr using css positioning

Community feedback

• 

  Abdul Khaliq 🚀•72,480

  @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.

  ---

  CSS 🎨:

  • Let me explain, How you can easily center the component for better layout without usage of absolute positioning.

  ---

  • We don't need to use absolute to center the component both horizontally & vertically. Because using absolute will not dynamical centers our component at all states

  ---

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

  ---

  • For this demonstration we use css Grid to center the component

  body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  }
  

  • Now remove these styles, after removing you can able to see the changes

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

  ---

  • Now your component has been properly centered.

  ---

  .

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

  Happy coding!

  Marked as helpful

  0

  ---

  

  Aryan Kumar•390

  @aryanda1Posted over 1 year ago

  @0xAbdulKhalid But should we apply centering to body or is it better to create a parent main as written in the earlier comment and than apply grid or flex on it.

  0
• 

  Fer•3,970

  @fernandolapazPosted over 1 year ago

  Hi 👋, regarding your questions and some other topics:

  HTML / ACCESSIBILITY:

  • The main content of every page (the card in this case) should be wrapped with the <main> tag.

  • This is a meaningful image and in case the user can't see it, the alt text should give a description.

  CSS:

  • You might consider using some CSS reset as a good practice at the start of each project. An example of a CSS reset from Josh Comeau 🔎

  In addition to resetting the box-sizing like you did, it is also good practice to remove margins and padding to have a clean starting point and reduce differences between browsers:

  * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  }
  

  • Consider to center the container using Grid or Flexbox. For example as follows:

  body {
  min-height: 100vh;
  display: grid;
  place-content: center;
  }
  

  This will also prevent page clipping in viewports with low height (such as mobile landscape orientation).

  • You might consider using relative units like rem or em since they are better for scalable layouts. Something simple to start with would be to convert to rem (1 rem equals the font size of the root element, 16px by default). Consider this suggestion especially for the font-size.

  I hope you find it useful, any questions do not hesitate 🙂

  Regards,

  Marked as helpful

  0