Design comparison
Solution retrospective
It seems border-box is not working properly, at least for my 3 buttons. When I hover over the buttons, I set to display 2px all sides borders on them. As it happens, the whole container's height increases by 12px, which is not the expected behavior for a border-box element, right?
Community feedback
- @correlucasPosted about 2 years ago
👾Oi João, tudo bem? Parabéns pelo desafio!
Acabei de ver sua solução e tenho umas dicas pra melhorar seu código/design:
Seu design tá quebrando mais ou menos em 650px o melhor jeito de resolver isso é ativando a media query um pouco antes de deixar a largura dos cards crescerem 100% da largura pra não ficar um espaco lateral mto grande antes da tela chegar a 400px.Sua solução já está funcionando, algo que você poderia fazer pra organizar melhor seu código e gerir os 3 cards de cada carro. Seria usar uma unica classe pra aplicar todas caracteristicas que são iguais em todos esses cards (padding, color, margin e etc) e usar uma outra classe pra aplicar aquelas caracteristicas que são diferentes entre eles, desse jeito se você precisar mudar algo vc muda só em uma classe ao invés de ir em cada classe individualmente.
👋 Espero que essas dicas te ajudem e que você continue no foco!
Marked as helpful0@jvmdoPosted about 2 years ago@correlucas adicionei media queries para evitar as duas colunas e mostrar apenas 1 ou 3 👍👍
0
Please log in to post a comment
Log in with GitHub
Join 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