CSS, Html

Community feedback

• 

  Cooger•270

  @Cooger17Posted about 2 years ago

  Hi @Xtrum! Very good job on this first challenge

  Here are some tips

  1- Use semantic tag <main> instead of <div> to wrap your code

  2- Avoid using css position property and use Flexbox or CSS Grid for layouts. Feel free to read some documentations about this two css modern property.

  3- Try to use any modern css reset to remove default css margin and padding on elements and others properties set by default.

  Hope this advices will help you.

  Happy coding

  Marked as helpful

  0
• 

  uchethecreator•40

  @uchethecreatorPosted about 2 years ago

  Hi, you did really great for a beginner. You can center the container by using the css flexbox property. Here's how:

  body {
     width: 100%;
     min-height: 100vh;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
  }
  Good job!
  

  Marked as helpful

  0

  ---

  

  Ayodele Hassan•90

  @XtrumPosted about 2 years ago

  @uchethecreator I will get on that....

  Thanks a bunch.....!

  0
• 

  Youssef Waleed•200

  @ywsolimanPosted about 2 years ago

  It's just two weeks and you are already killing it!

  To make the QR image scale with the container, you can simply give it max-width:100%

  I recommend you to read more about CSS Flexbox and CSS Grid, they will help you a lot through your journey. You could center your container vertically and horizontally using one of them.

  I am just a newbie, but here's my solution if you want to take a look:

  https://www.frontendmentor.io/solutions/qr-component-using-css-flex-FxuBLT9kE9

  Keep up the great work!👏

  0

  ---

  

  Ayodele Hassan•90

  @XtrumPosted about 2 years ago

  @ywsoliman Really appreciate your response....!

  0