Design comparison
Solution retrospective
I am feeling way more confortable in replicating the desktop version of the challange, but the responsivness is not that good..I would like to know where I can find a good material about media queries and responsive layout.
Community feedback
- @correlucasPosted about 2 years ago
👾Oi Bernardo, tudo bem? Parabéns pelo desafio!
Aqui um tutorial explicando bem a fundo o tema de responsividade:
https://www.youtube.com/watch?v=H91DhKPjhPk
ouhttps://www.youtube.com/watch?v=WcGPSeuJDJ0
Quando esse card vai ficando mto pequeno o texto começa a ficar muito colado, um jeito de melhorar isso é fazer com que a parte dos preços fiquem em linhas diferentes depois de uma determinada largura, por exemplo essa media query que apliquei pro seu código:
@media (max-width: 350px) { .plan { display: flex; max-width: 100% align-items: center; justify-content: center; padding-bottom: 3em; flex-direction: column; } }
👋 Espero ter ajudado e continue no foco!
Marked as helpful1@BernardoHollmannPosted about 2 years ago@correlucas Obrigado pelas dicas, Lucas!
Realmente, a parte dos preços estava "embolando" e, com a sua ajuda, melhorou bem o visual!
0 - @AdrianoEscarabotePosted about 2 years ago
Hi BernardoHollmann, how are you?
I really liked the result of your challenge, the responsiveness of the project was good, but if you want to go deeper into
media-query
I have a link that was very important for me to understand about each media query function. When to use it, why to use it and not clutter themedia-query
code:Click here ---> here
Hope it helps... 👍
1@BernardoHollmannPosted about 2 years ago@AdrianoEscarabote Thanks for your comment, Adriano! Very interesting article!
1
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