Qr code components solution

Community feedback

• 

  Ecem Gokdogan•9,380

  @ecemgoPosted over 1 year ago

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

  • If you want to make the card centered both horizontally and vertically, you'd better add flexbox and min-height: 100vh to the body
  • You can use the recommended background color for the screen

  body {
    /* background-color: whitesmoke; */
    font-family: 'Outfit', sans-serif;
    background-color: hsl(212, 45%, 89%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
  }
  

  • If you use max-width, the card will be responsive and you can reduce the width a bit

  .card {
    /* max-width: 350px; */
    max-width: 300px;
  }
  

  • You don't need to use the styles below for the img

  .image {
     /* margin-top: 0px; */
     /* text-align: center; */
     /* display: block; */
   }
  

  • Also, you don't need to use .container in order to center the card and you can remove it

   /* .container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top:100px;
  } */
  

  • Finally, you don't need to use media queries because the solution will be responsive if you follow the steps above. I recommend you don't use the styles that don't work.

  Hope I am helpful. :)

  Marked as helpful

  0

  ---

  

  devAelo•30

  @devAeloPosted over 1 year ago

  @ecemgo thank you ill keep that in mind or thank you ill apply these on my next challenge i appreciate this :)

  1

  

  Ecem Gokdogan•9,380

  @ecemgoPosted over 1 year ago

  @devAelo Happy to help! :)

  0
• 

  Angela Moore•160

  @Cyber-ChicPosted over 1 year ago

  Wonderful job completing your first challenge! 😊

  I have a few small recommendations that may improve your site:

  • Add an alt attribute to your code. Alt attributes are required for all non decorative images on a website. The QR code on your site will be scanned. This means that the image is not considered decorative and will require a description. To fix this you could add the following to your <img> tag alt="QR code to frontendmentor.io"

  • Add a <main> tag around the main content on your webpage. All web pages should include a <main> tag. A <main> tag is a semantic HTML element that defines the main content on a page such as primary sections, text, articles, etc.

  Example:

  <main>
    <div class='container'>
      <h1>Main heading text</h1>
      <p>paragraph text</p>
    </div>
  </main>
  

  I hope this is helpful! Great work & Happy Coding!

  -Angie

  Marked as helpful

  0

  ---

  

  devAelo•30

  @devAeloPosted over 1 year ago

  @Cyber-Chic thank you ill keep that in mind or thank you ill apply these on my next challenge.

  1

  

  Angela Moore•160

  @Cyber-ChicPosted over 1 year ago

  @devAelo My pleasure! Glad to help! 😊

  0
• 

  Apah•280

  @apah-devPosted over 1 year ago

  In addition to what Abdul has recommended, I do advice you always visit the styleguide.md file to use the correct colors and fonts for the projects.

  ** It is downloaded with the project files at the beginning of the challenge **

  Marked as helpful

  0

  ---

  

  devAelo•30

  @devAeloPosted over 1 year ago

  Thanks for the information @apah-dev

  0
• 

  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

  .container {
     padding-top: 100px;
  }
  

  ---

  ---

  • 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

  0

  ---

  

  devAelo•30

  @devAeloPosted over 1 year ago

  Thanks @0xAbdulKhalid it's very helpful for me

  0