Skip to content
Submitted over 1 year ago

QR Code

emilsonylarde•10
@emilsonylarde
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.

    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 in CSS file:
    • In order to center the card correctly, you'd better add flexbox and min-height: 100vh to the body
    • For the color of the screen, you can use the recommended color in the body
    body{
  font-family: 'Outfit', sans-serif;  
  /* background-color: #ECF2FF; */
  background-color: hsl(212, 45%, 89%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
    • If you use flexbox in the body, you don't need to use margin in the .qr-container to center the card
    • If you want to give the gap between the content and the border of the card, you can use padding
    • If you use max-width instead of width, it makes the card responsive.
    .qr-container {
  background-color: white;
  /* width: 250px; */
  max-width: 300px;
  /* margin: 115px auto; */
  border-radius: 15px;
  /* height: 390px; */
  padding: 15px;
}
    • In addition to that above, in order to make the card responsive and the image positioned completely on the card, you'd better add width: 100% and display: block for the img in this way:
    img {
  /* width: 200px; */
  width: 100%;
  display: block;
  /* margin: 20px 3px 10px 3px; */
  border-radius: 15px;
}

    Hope I am helpful. :)

    0
  • Tajwar Arik•60
    @tajwararikPosted over 1 year ago

    Your code is overflowing the container because of the height property. Remove it or use auto to stop overflowing the text.

    You can read the style guide to get information about the background color, font family, font size, etc. It will help you to make the project looks as close as the sample.

    There are many ways to put the container in the center. Using flexbox property is one among them.

    body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    It will keep your container in the center as well as the elements inside it.

    0

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