Qr code challenge using flexbox to center the card.

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted almost 2 years ago

  Hi, Tonyy!

  For the size of the card, you only need to set a max-width to prevent it from filling the entire page while still allowing it to shrink if needed.

  Some more suggestions from me:

  • Remove width: 1440px from the body element. It makes the site looks bad on a lot of devices.
  • Remove width: 16% from the card or .container. It makes the card looks small on some some screen sizes (after you apply my first suggestion).
  • Set max-width to the card element with the static unit (rem or px).
  • Use a CSS reset whenever you start a new project. This can help you set the styling foundation easily. A Modern CSS Reset

  Avoid using px unit for font sizes. Use rem or em instead. Relative units such as rem and em can adapt when the users change the browser's font size setting.

  • rem vs em Units in CSS | DigitalOcean
  • The Surprising Truth About Pixels and Accessibility: should I use pixels or rems?

  I hope this helps. Happy coding!

  Marked as helpful

  1

  ---

  

  tony/c.dev•260

  @tony1cPosted almost 2 years ago

  @vanzasetia It does help a ton! Thank u for ur time! I'll do it the right way now :d

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted almost 2 years ago

  @tony1c I am happy to know my feedback helped. 🙂

  1
• 

  Saulius K.•560

  @TH3RIVPosted almost 2 years ago

  Hi, @tony1c!

  Your project is nearly finished. All it needs is a few adjustments:

  • It should contain landmarks within your body tags, in this project your card should be between main tags and your attribution should be between footer tags. Not using landmarks is considered bad practice and makes it harder to read the code.
  • Try to avoid using px values as much as possible and use rem instead.
  • Look into using flexbox to center your elements and try to never declare width on the body, by default it is set to full screen width possible.
  • Card size can be set with .card {max-width: 350px (yes it's okay to use px here)}.
  • You can wrap the title and the description in the same container, so it will always keep them same width when you apply padding or margin to it.
  • Try to start using custom CSS properties. While it's not essential in this project, it is a good habit to develop.

  Hope this helps!

  Marked as helpful

  1

  ---

  

  tony/c.dev•260

  @tony1cPosted almost 2 years ago

  @TH3RIV Thank u for ur time. I fully understood what I did wrong and i'll immediatly make up for the things i messed up! Helped a ton!

  0