QR-Code component challenge possible solution with media queries

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.

  ---

  CSS 🎨:

  • Looks like the component has not been centered properly. So let me explain, How you can easily center the component without using margin or padding.

  ---

  • We don't need to use margin and padding to center the component both horizontally & vertically. Because using margin or padding 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

  .parent-container {
     margin: 20em auto;
  }
  

  ---

  ---

  • 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

  1
• 

  Hikmah•1,070

  @HikmahxPosted over 1 year ago

  Hi sirgra 👋! I checked your solution and you did great work on this project! I have a few suggestions for you:

  • Since it is a single component, the card should be centered and the page should be the size of the device. This means the project should simply occupy the whole height. To do this, replace the margin in the parent-container with margin: auto and remove the media query because margin: auto is all you'd need. This will make the card centered.
  • To the body of the code, add this:

  body {
      height: 100vh;
      display: flex;
      flex-direction: column;
  }
  

  The height: 100vh; will make the height of the page the full height of the device, making it a full page. using display: flex; will shift the card to the center vertically and since by default, the file direction is row, ie the element in the body will be arranged in the horizontal row, adding flex-direction: column makes the card and attribution to be organized in a vertical way.

  Hope this helps

  Marked as helpful

  1
• 

  Boluwatife Bonaventure•550

  @BoyutifePosted over 1 year ago

  Hi SIRGRA 👋. Congratulations on successfully completing the challenge! 🎉 Job well done.

  HTML:🔖🔖

  I noticed that you used a div tag to wrap your content, which is a common practice. However, I recommend using a main tag instead as it is more semantically appropriate for wrapping the main content of a web page.

  By using a main tag, you can convey to search engines and assistive technologies that this is the primary content of the page, which can help with accessibility and search engine optimization.

  Overall, great job on your markup, and I hope this feedback is helpful in improving your web development skills.

  <main class="parent-container">
  
  </main>
  

  Hope am helpful.

  HAPPY CODING

  Marked as helpful

  1
• 

  sirgra•20

  @sirgraPosted over 1 year ago

  Thanks for all your helpful comments! 😊

  I went with the Grid to center the QR-Code and added a <main> tag instead of the <div>

  0