Responsive QR Code

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

  .card {
    margin: auto;
    margin-top: 8%;
  }
  

  ---

  ---

  • 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

  ---

  

  Richlee-demo•50

  @Richlee-demoPosted over 1 year ago

  @0xAbdulKhalid thank you. Will look into it.

  0
• 

  Hassia Issah•50,650

  @HassiaiPosted over 1 year ago

  Replace<div class="container">with the main tag, <p class="header"> with <h1> and <div class="attribution"> with the footer tag to make the page accessible. click here for more on web-accessibility and semantic html

  Every html must have <h1> to make it accessible. Always begin the heading of the html with <h1> tag wrap the sub-heading of <h1> in <h2> tag, wrap the sub-heading of <h2> in <h3> this continues until <h6>, never skip a level of a heading.

  For a responsive content replace the width in .card with max-width.

  To center .card on the page using flexbox or grid instead of margin:

  • USING FLEXBOX: add min-height:100vh; display: flex; align-items: center: justify-content: center; to the body

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

  • USING GRID: add min-height:100vh; display: grid place-items: center to the body

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

  Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here and here

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  1
• 

  Weberowsky•70

  @WeberowskyPosted over 1 year ago

  To scale the card across devices you could use vw and vh (Viewport Width, Height) or some other relative values like rem. On some bigger projects if you'd need to change position of the element when its on mobile you could use the media rule

  Marked as helpful

  1
• 

  Jonah Ssegawa•240

  @devjhexPosted over 1 year ago

  @Richlee-demo According to your code it would be better to make the body element a display of flex and the other properties below so as to center the card easily as shown below.

  body {
        display:flex;
        justify-content:center;
        align-items:center;
        flex-direction:column;
  }
  

  Hope you would find this helpful.

  Happy coding and keep up with the spirit.

  Marked as helpful

  1