Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

1 to 3 columns grid responsive layout

@jvmdo

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

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

Lucas 👾 104,420

@correlucas

Posted

👾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 helpful

0

@jvmdo

Posted

@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
Discord logo

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