QR CODE SOLUTION USING MARGIN AND PADDING

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

  body {
     padding: 50px 0;
  }
  

  ---

  ---

  • Now your component has been properly centered

  ---

  .

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

  Happy coding!

  0
• 

  Ecem Gokdogan•9,380

  @ecemgoPosted over 1 year ago

  Some recommendations regarding your code that could be of interest to you.

  HTML

  • You should replace <div> with the <main> tag in html file.

  <main>
     <img>
     <h2></h2>
     <p></p>
  </main>
  

  CSS

  • You'd better use flexbox for this solution to center the card correctly and easily.
  • Firstly, you don't need to use the padding for the body
  • Instead of padding, you can add flexbox and min-height: 100vh to the body to center it

  body {
     /* padding:50px 0; */
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
  }
  

  • Finally, you need to change the name of div in the style tags to main

   main{       /* this was your div please change its name like this */
      background-color: #fff;
      margin: auto;
      border-radius:25px;
      width:20rem;
     padding:15px 15px 25px 15px;
    }
  

  Hope I am helpful. :)

  0
• 

  Atif Iqbal•3,200

  @atif-devPosted over 1 year ago

  Hi pra-23845, congrats🎉 on completing the challenge. Better take care about following points.

  • Instead of using padding: 50px 0; use following block of code for proper centering.

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

  • When we open GitHub repository link, at right side you will find an About Section. There, also include live preview link of your project. It is better for someone to check your live project while interacting with code.
  • Write more in your GitHub project's README file. Like, write about your working flow, findings, new learned things, useful resources, etc.

  Hope you will find this Feedback Helpful.

  0