P
Flávia Reis• 650
@flaviare1s
Submitted
What challenges did you encounter, and how did you overcome them?
I couldn't get the side scroller out of the site. Would there be a way to fix this? Feedbacks are welcome!
P
Flávia Reis
@flaviare1s
All comments
- PFlávia Reis• 650
@flaviare1s
Posted
Bernardo, muito obrigada pelas dicas! Eu estava colocando o overflow hidden no local errado, por isso não estava funcionando. Obrigada mesmo! :)
1 @YusukeUramesh
Submitted
Ainda estou aprendendo! não sei se realmente esta certo! fiz algumas alterações personalizadas, mais acho que estou indo bem pra primeiro desafio!
PFlávia Reis• 650@flaviare1s
Posted
Oi Leonardo, seu projeto ficou ótimo. Eu também ainda estou aprendendo. 😊 Uma dica, essas medidas que ele coloca como sendo a responsividade, não necessariamente são a largura mínima e máxima do projeto. E você observar bem, o componente tem uma largura que não ocupa a tela inteira na versão desktop. Tenta tirar essas medidas de max e min width e fazer a responsividade utilizando media query e valores relativos.
Marked as helpful
1- nanishipi• 40
@nanishipi
Submitted
PFlávia Reis• 650@flaviare1s
Posted
Olá! Seu trabalho está muito bom, mas na tela do meu celular não ficou responsivo. Você poderia tentar fazer algumas alterações, tipo:
body { width: 100vw; }
.qr-card { margin: auto; width: 280px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; padding: 2rem; border-radius: 2rem; }
@media (max-width: 375px) { .qr-card { width: 80%; } }
I would also delete the other media query.
Hope this helps. :)
Marked as helpful
0 - Vinicius Duarte• 60
@ViniCellist
Submitted
Please tell me how I can improve
PFlávia Reis• 650@flaviare1s
Posted
Oi Vinicius! O seu projeto ficou muito bom em tela grande, mas no meu celular está cortando.
Vou fazer algumas sugestões, tá bom?
Provavelmente isso está acontecendo porque você colocou a imagem como background.
Sugiro que você coloque a largura da div.container fixa (por exemplo, 300px) e coloque a imagem dentro da div.section__qr, com width de 90% (retira a imagem do background-image). Lembra de ajustar o border-radius da imagem.
Também retira todas as height, com excessão da do body.
Eu deixaria apenas uma media query, a de telas pequenas (375px).
Espero ter ajudado!
Marked as helpful
0 - Vinicius Duarte• 60
@ViniCellist
Submitted
Please tell me how I can improve
PFlávia Reis• 650@flaviare1s
Posted
Oi Vinicius, gostei do seu projeto! Também estou fazendo os cursos do Curso em Vídeo. 😊
A sugestão que eu te dou é que como o site é formado apenas por um componente pequeno, eu acho que não precisa colocar tantas configurações de media query. Eu faria o código com o tamanho do componente fixo para telas grandes e ajustaria a width em porcentagem para telas de celular.
Marked as helpful
0 - Oyesina Paul• 90
@oyesina-paul
Submitted
How do i make my project responsive? Responsive Design Is the most difficult for me.
PFlávia Reis• 650@flaviare1s
Posted
Hello Oyesina! I recommend that you study the concepts of Media Query and Mobile First.
To make responsive websites it is interesting to learn Flexbox and Grid.
Congratulations on your project! 😊
0 - Nantue Polchevski• 170
@Nantue
Submitted
PFlávia Reis• 650@flaviare1s
Posted
Hello, I liked your work, but on my phone the top card appears cut off.
You can customize the div.attribute with your name and a contact link. 😊
0 - Vagner Moura• 150
@VagnerMouraMacedo
Submitted
PFlávia Reis• 650@flaviare1s
Posted
Oi Vagner! Seu trabalho ficou legal, mas falta ajeitar a media query. Aqui no meu celular os dois cards estão abrindo um ao lado do outro.
Marked as helpful
0
