Responsive qr page code using HTML/CSS

Community feedback

• 

  Ted Rinquest•440

  @climb512Posted over 1 year ago

  Looks great!

  I see you were able to center the project both vertically and horizontally using margins, and it looks great for this simple page, but I can point out another way, which is a very popular standard and much more useful as projects become more complex. You can use the built in CSS property of display: flex; to achieve this easily. I point this out because I see you tried using

  .box { 
  display: block;
  align-items: center;
  justify-content: center;
  }
  

  ...but align-items and justify-content won't work with display: block. Instead, remove the margin and put this centering code on the parent (the body tag in this case), and give it a full page height, like so:

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

  Instead of Flex you could also use Grid, but positioning most elements with one of those two is the general standard in 2023. Actually most projects will use both, as they are slightly different. There are many great tutorials on Flexbox and CSS-Grid available, and I found that understanding at least one of them to start is pretty important.

  Keep coding!

  0