Skip to content
OverviewSolutions
30
Comments
2
Jeffrey Tuason
@Tuason066

All comments

  • Andrew Hsu•10
    @a-hsuSubmitted over 2 years ago

    Questions:

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

    QR Code Component

    3
    Jeffrey Tuason•550
    @Tuason066Posted over 2 years 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?

    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
    @yousra10Submitted over 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
    Jeffrey Tuason•550
    @Tuason066Posted over 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