Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
1
Comments
2
Vinicius Lima
@ViniciusLCLima

All comments

  • Sam•10
    @Sam-Lemon
    Submitted over 1 year ago
    What are you most proud of, and what would you do differently next time?

    I overcame some frustration with positioning and finished the project.

    What challenges did you encounter, and how did you overcome them?

    I struggled with getting everything centered responsively. I overcame it by googling and looking at other people's solutions and trying things until I got it to work for me.

    What specific areas of your project would you like help with?

    Any tips on centering divs both vertically and horizontally.

    QR Code Component

    2
    Vinicius Lima•30
    @ViniciusLCLima
    Posted over 1 year ago

    With your div with a class of qr-card being the child of the body element, you could turn the body into a flex box, justify-content: center, align-items: center and then set the height of that same body element to 100vh, vh is a unit that divides the view height by 100, so you'll have a body element with the same height as view height of the page in your browser, also remove the default margins by adding margin:0px to body. As the body element will be as big as the view height and have no margin and qr-card div will be positioned in the center and in the middle of it, the card will be centralized in the middle of the screen. To summarize: body {display: flex; justify-content: center; align-items:center; height: 100vh; margin:0px)

    Another thing you could do is to substitute the first "div" tag to a "main" tag. This will make it easier for people with disabilities to understand your page.

    Marked as helpful
  • Gabriel De Sousa•10
    @Gabriel-Sousa-Dev
    Submitted over 1 year ago
    What are you most proud of, and what would you do differently next time?
    • Gostei muito da estruturação que fiz no projeto utilizando Bem e variáveis css.
    What challenges did you encounter, and how did you overcome them?

    Eu quis usar técnicas que já havia visto porém nunca tinha usado ainda usado. Por isso fui pesquisar como usar essas técnicas e encontrei os dois artigos abaixo.

    • Mdn
    • Alura
    What specific areas of your project would you like help with?
    • Como sou iniciantes quanto ao uso de bem css gostaria de dicas em relação ao uso dessa técnica.

    Desafio Qr-code-component

    #bem
    1
    Vinicius Lima•30
    @ViniciusLCLima
    Posted over 1 year ago

    Uma coisa boa a se fazer é separar os arquivos css em uma pasta "styles" para efeitos de organização.

Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub