Design comparison
Solution retrospective
O desafio também pedia responsividade, porém ainda não aprendi.
O que acham dessa lógica? Conhecem algum curso/site que eu possa, de fato, aprender responsividade?
Queria aprender criando do zero primeiro para depois aprender bootstrap.
Community feedback
- @correlucasPosted about 2 years ago
👾Fala Thais Duque, tudo bem? Parabéns pelo desafio!
Acabei de ver sua solução e acho que ela está bem completa, tenho algumas dicas pra você:
O seu conteudo nao ficou centralizado se vc der um zoom out ou abrir em uma tela maior vc vai conseguir ver isso. Pra resolver isso eu te aconselho criar uma class de
container
onde vc vai adicionar o tamanho maximo do containermax-width: 1110px
emargin: 0 auto
pra forçar o alinhamento, olha dois exemplos aqui abaixo de dois blocos centralizados:header { margin: 0 auto; max-width: 1110px; height: auto; background-image: url(../assets/image/bg-header-desktop.png); background-repeat: no-repeat; background-size: auto; } .container-section-one { max-width: 1110px; margin: 0 auto; /* width: 100%; */ height: auto; /* margin-top: 10%; */ }
👋 Espero ter ajudado e continue no foco!
Marked as helpful0@DuquewdevPosted about 2 years ago@correlucas
Opa! Excelente! Obrigada pela dica, Lucas! Vou pôr em prática!
1 - @thisisharsh7Posted about 2 years ago
Olá Duque, tudo bem! e Sua solução parece perfeita.
Para responder sua pergunta, para tornar a página responsiva você não deve usar valores de pixel em todos os lugares, pois é uma unidade fixa em CSS. Tente usar algumas unidades relativas como rem, percentage etc.
Aqui estão alguns links onde você pode aprender sobre isso: - CSS units
Espero que isso ajude você a codificar feliz✌️.
Marked as helpful0@DuquewdevPosted about 2 years ago@thisisharsh7 Agradeço imensamente sua dica. Vou olhar o link com certeza!
Vi em alguns lugares que as larguras deviam ser sempre em porcentagem. Ninguém nunca falou das demais unidades.
0
Please log in to post a comment
Log in with GitHubJoin 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