Skip to content
Submitted over 1 year ago

Qr code component with HTML and CSS

Gilang Cahya Gumilang•20
@punyagilang
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

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 that this solution is responsive, I recommend some techniques without using media query for this solution but it's up to you whether you use it or not. Also, I recommend you try to avoid repetition in your code.

    HTML

    • If you want to use the recommended font-family for this project, you can add the following between the <head> tags in HTML file:
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap" rel="stylesheet">

    CSS

    • After adding them to the HTML, you can add this font-family to the body
    • If you want to make the card centered both horizontally and vertically, you'd better add flexbox and min-height: 100vh to the body
     body {
    background-color:hsl(212, 45%, 89%);
    font-family: 'Outfit', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    height:100vh;
}
    • When you use flexbox in the body, you don't need to use margin in the .qrcard to center the card
    • If you use max-width, the card will be responsive
    • You'd better give padding to give a gap between the content and the border of the card
    .qrcard {
  /* padding-top: 15px; */
  padding: 15px;
  /* margin-left: auto; */
  /* margin-right: auto; */
  max-width: 300px;
}
    • In addition to that above, in order to make the card responsive and the image positioned completely on the card, you'd better add max-width: 100% to the img
    img {
  /* display: flex; */
  /* margin-left: auto; */
  /* margin-right: auto; */
  /* max-width: 80%; */
  max-width: 100%;
}
    • You can update padding of text in this way:
    .textcontainer p {
  /* justify-content: center; */
  padding: 0 0 20px 0;
}
    • Finally, if you follow the steps above, the solution will be responsive. You don't need to use media queries and these styles for this solution so you can remove them
    /* main {
      height: 200px;
      width: 400px;
} */

/* .textcontainer {
      font-family: 'Outfit', sans-serif;
      padding: 50px 50px;
} */

/* .attribution {
      padding-top: 50px;
      margin-bottom: 50px;
} */

    Hope I am helpful. :)

    Marked as helpful
    1
    Gilang Cahya Gumilang•20
    @punyagilangPosted over 1 year ago

    @ecemgo Thank you very much, it's very helpful for me

    1
  • Bosca Darius•120
    @dariuss1123Posted over 1 year ago

    hello. great job for the solution.

    However, if you want to center your card you can make the body a flexbox and apply a height of 100vh. and then you can apply justify-content: center and align-content: center. This will place your card component in the center of the page.

    Hope this was helpful. Happy coding!

    Marked as helpful
    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord