Qr code Component Main

Community feedback

• 

  Adriano•39,210

  @AdrianoEscarabotePosted about 2 years ago

  Hi Agustin, how are you? I really liked the result of your project, but I have some tips that I think you will enjoy:

  I noticed that the content is going to the side in higher resolutions, to fix that we can do this:

  .main {
      margin: 0 auto;
  }
  

  avoid using px, If your web content font sizes are set to absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. if you want to keep using px for development and then format the whole code to rem, you can use this vscode extension: px to rem

  To align some content in the center of the screen, always prefer to use display: flex; it will make the layout more responsive!

  body {
      margin: 0;
      padding: 0;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      min-height: 100vh;
  }
  

  The rest is great!

  I hope it helps... 👍

  Marked as helpful

  1

  ---

  

  Agustin•30

  @katuramu27Posted about 2 years ago

  @AdrianoEscarabote Thank you for all your tips!!! I didn't know about the vs code extention! I will download it ! I am still a bit confused on when to use grid and when to use flex! So I try both ahah Most of all I didn't know about the use of body{} that way. Thanks!

  0
• 

  Michael Mushrush•250

  @FloratobyDevPosted about 2 years ago

  The code looks great! Here's a simple tip when trying to add a Google Fonts link to your website and you need to add the font weights. First, copy the given font URL in the style.md. Then, add the following to it : :wght@600;700;900&display=swap . Let's cut that into pieces: :: Make to add this. wght@600;700;900: Each number signifies a font weight for that specific font family. If you want a font-weight added, simply add a semi-colon and then the weight. &display=swap: Usually when you add a font to a certain element like p for example, you do font-family: 'Outfit', sans-serif. Outfit is the font family you got from Google Fonts. Then, the sans-serif is a default font integrated into a .css file. It's a fallback font. This is important to explain because what display=swap does is use the fallback font while it's still loading the Google Font that you're trying to get online to your page. Once it's done loading, then it'll start using the Google Font.

  Hope that helps.

  Marked as helpful

  0

  ---

  

  Agustin•30

  @katuramu27Posted about 2 years ago

  @FloratobyDev Thank you so much!

  0