Community feedback

• 

  RatifiedGeorge•670

  @RatifiedPosted over 1 year ago

  Hello @Simon-Muchemi

  Good job on completing the challenge.

  I'd also advise using CSS variables to avoid repetition and make editing your code easy. For example: :root{ --main-font: 'Outfit', sans-serif; }

  Then because we only have one font to be used here, set the font in your body: body{ font-family: var(--main-font); }

  You can now comfortably remove this: #message{ font-family: Outfit, sans-serif; }

  and

  #title{ font-family: Outfit, sans-serif; }

  You'll have minimized repetition. I hope this helps.

  Happy coding lad.

  Marked as helpful

  0
• 

  hitmorecode•6,680

  @hitmorecodePosted over 1 year ago

  Congratulations well done. These are the CSS changes I would recommend.

  • Place the font-family inside the body, this will apply to the entire page. No need to do it for each tag.

  • Use fixed width and height for the card instead of using % and vw. In this case you should avoid % and vw, this will break your page.

  • Stick to one colorization method, you are using named colors, hsl and hex. For best practice avoid named colors.

  • Remove the margin on the #QR-code and add padding on the .container

  • Because the width of the card is smaller than 375px and there is only one card, you don't need to use media queries. If you want to practice with media queries add more cards to the page and make it responsive.

  • In this case the easiest way to center the card on the page is by using flexbox, but if you want to use grid to do it. You have to add grid divisions to your page to achieve this.

  These are the few changes you can make to you CSS to make it a bit better :-)

  body{
  background-color: hsl(218, 8%, 72%);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  place-items: center;
  font-family: Outfit, sans-serif;
  }
  #QR-code{
  height: 288px;
  width: 288px;
  border-radius: 15px;
  }
  .container{
  grid-column-start: 2; ### you can combine column-start and column-end by doing this: grid-column: 2 / 3. The first value is for the start and the second for the end.
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
  height: 500px;
  width: 320px;
  background-color: aliceblue; ### change to hsl or hex
  border-radius: 15px;
  text-align: center;
  box-shadow: 0 10px 8px #8d9090;
  padding: 20px;
  }
  #title{
  font-weight: 700;
  font-size: 18px;
  color: #2b3e4c;
  }
  #message{
  font-weight: 400;
  font-size: 14px;
  color: hsl(165, 7%, 55%);
  padding-bottom: 20px;
  }
  #title, #message{
  margin: 10px;
  }
  

  If you have any questions regarding this, feel free to ask

  Marked as helpful

  0

  ---

  

  Simon_Muchemi•80

  @SymonMuchemiPosted over 1 year ago

  @hitmorecode Thank you so much for this.

  0
• 

  Ofentse Rampa•70

  @Rampage-SamaPosted over 1 year ago

  Lovely stuff Simon quick note you should have a fixed width for your desktop version and a breakpoint for your small devices. Good job none the less!

  0