All comments

• 

  Andrew Hsu• 10

  @a-hsu

  Submitted over 1 year ago

  Questions:

  • What is the best way to center this card?
  • How can I change the background color of the page?

  

  QR Code Component

  #tailwind-css

  3

  3

  0

  

  Jeffrey Tuason• 550

  @Tuason066

  Posted over 1 year ago

  Hi Andrew, 👋

  1. What is the best way to center this card?

  • replaced your classes into this classes grid place-items-center. Use place-items-center to place grid items in the center of their grid areas on both axis.
  • Check this out for your reference: https://tailwindcss.com/docs/place-items

  1. How can I change the background color of the page?

  • to change the background color of the page just simply add the body tag a class of bg-(your desired color).
  • Check this out for your reference: https://tailwindcss.com/docs/background-color

  You can also check my solution to this challenge. I am also using tailwindcss. https://www.frontendmentor.io/solutions/qr-sKgoF9EIik

  Happy Coding! 😊

  Marked as helpful

  0
• 

  Yous• 170

  @yousra10

  Submitted almost 2 years ago

  Hi everyone !!

  It's my first time using @media queries for responsive. I use Flexbox to improve this skill. If you have any suggestions, it would be a pleasure to know it !! thank you in advance !

  Happy coding !

  Best regards ! Yous Ben

  

  Social Proof section Master

  2

  1

  0

  

  Jeffrey Tuason• 550

  @Tuason066

  Posted almost 2 years ago

  Hi, I have a suggestion for your styling.

  I noticed that your elements have the same style and you write it repeatedly. If your elements have the same styles you can write like this:

  .irene-roberts,
  .anne-wallace {
  styles...
  }
  

  so you don't need to repeat the styles over and over.

  and if they have only different margins you can write like this:

  .irene-roberts,
  .anne-wallace {
  same styles...
  }
  
  .irene-roberts {
  margin-top: 1rem;
  }
  
  .anne-wallace {
  margin-top: 2rem;
  }
  

  I also noticed that you wrote your margins like this:

  margin-bottom: 0;
  margin-left: 1rem;
  margin-top: 1.2rem;
  

  there is a shorthand property for that you can write it like this:

  margin: 1.rem 0 0 1rem;

  check out this link for more information: https://www.w3schools.com/css/css_margin.asp

  By the way, the output is very significant. Happy coding !

  Marked as helpful

  0