QRCode

Community feedback

• 

  Alexandru•330

  @WardinulPosted over 2 years ago

  Hello ShaoWei!

  You did good, but I will give you some useful information to help your CSS.

  Firstly I have noticed some problems with the font weights, that is because in your google fonts link you have not selected the 400 and 700 weights inside your link, only one weight of 200.

  The QR card is not centered correctly, this is because you need to add a min-height of 100vh to your body. Also you can delete the padding of your body.

  I also noticed that you gave to your image a max-width of 100% to be more responsive, but it will not work since the image has a specified width of 270px inside your html. Delete that width and the image will be responsive.

  You can also try to keep your CSS simple, for example in the .container I made some changes, commenting out some of your CSS properties and putting some simple ones:

  .container{

  background-color: white;
  border-radius: 5%;
  /* padding: 15px 5px; */
  /* width: fit-content; */
  display: flex;
  /* flex-wrap: nowrap; */
  flex-direction: column;
  align-items: center;
  /* justify-content: center; */
  
  /* min-width: max-content; */
  max-width: 300px;
  padding: 1rem;
  margin: 1rem;
  text-align: center;
  

  }

  Another thing I noticed is the use of the <strong> tags where you added some styles to match the given design, but we can use another simple method. I deleted the tags and their tags and I just added a padding: 0 1rem; for the subtext.

  One last thing to keep in mind is the order of your CSS, try to style the first elements inside your html in order, starting with the body, the container, the image and then the text.

  I hope I helped you with my advices

  Best of luck in your future challenges!

  Marked as helpful

  0
• 

  Rowen•60

  @RowenTeyPosted over 2 years ago

  Hello ShaoWei,

  Great job on your first challenge!

  My advice would be the same as what Wardin said, try to structure your CSS according to the hierarchy in your HTML, e.g style body first, then container and so on.

  0
• 

  Danilo Blas•6,300

  @Sdann26Posted over 2 years ago

  Hi ShaoWei!

  When you download a challenge in frontend mentor there is a file called style-guide.md in this you will find the font size and colors, as well as the typography because I realize that you have not considered these so I think you did not get to see this file, with the information there you can improve your current design.

  0