HTML and CSS solution using flex box

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted over 1 year ago

  Hello 👋. Congratulation on successfully completing your first challenge 🎉 ! !

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

  HTML 🏷️:

  • Use semantic elements such as <main> and <footer> to improve accessibility and organization of your page.

  • Since this component involves scanning the QR code, the image is not a decoration, so it must have an alt attribute. The alt attribute should explain its purpose. e.g. QR code to frontendmentor.io

  CSS 🎨:

  • Instead of using pixels in font-size, use relative units like em or rem. The font-size in absolute units like pixels does not scale with the user's browser settings. Resource 📘.

  • For a responsive and resizable component, consider using max-width for the width. Also, set width: 100% for the image to fit the size of the component.

  • To center an element vertically, you should use a height to its container and use ``. In this case it is recommended to use "min-height: 100vh" so that it occupies 100% of the viewport height. e.g.:

  .biggest-container {
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  
  .qr-container {
      padding: 15px;  /* NOTE: Instead of creating a white border, you can use padding to create the space inside the component. */
      /* border: medium solid white; */
      /* border-width: 20px; */
      border-radius: 25px;
      /* position: relative; */
      /* bottom: -150px; */
      /* display: flex; */  /* NOTE: Using flexbox here is not strictly necessary*/
      /* flex-direction: column; */
      /* width: 400px; */
      max-width: 400px; /* NOTE: Use max-width instead of width */
      text-align: center;
      background-color: white;
  
  .qr-image {
      width: 100%; /* NOTE: Update the image selector to make responsive images */
      border-radius: 25px;
  }
  
  .attribution {
      text-align: center;
      position: relative;
      /* bottom: -370px; */
  }
  

  CSS Reset 🔄:

  • You should use a CSS reset. A CSS reset is a set of CSS rules that are applied to a webpage in order to remove the default styling of different browsers.

    CSS resets that are widely used:

    • Reset CSS
    • "My Custom CSS Reset" by JoshWComeau

  I hope you find it useful! 😄 Above all, the solution you submitted is great!

  Happy coding!

  0
• 

  Moses Ventura•170

  @Moses2308Posted over 1 year ago

  There are actually multiple ways to center an element.

  • You can use flex box to center an element in its flex container. To do that you would need to use the justify-content property and the align items property.
  • You can use CSS grid as well to center grid items with place-items : center;
  • You can also use margin auto to center horizontally.

  If you don't want to center the items, it can be helpful to put all the items you do want to align in a container, and use flex box or grid to work on them

  0