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

Simple product preview card using React with Tailwind CSS

@fernandohmg

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Lucas 👾 104,420

@correlucas

Posted

👾Fala Fernando, tudo bem? Parabéns pelo seu primeiro desafio e seja bem vinda a comunidade do Frontend Mentor!

Sua solução ficou perfeita, gostei mto do trabalho que vc fez pra construi-la usando framework. A unica coisa que eu mudaria seria a parte do preço que fica saltando pra fora do container quando a tela começa a diminuir e o preço vaza o container, pra resolver isso só jogar uma media query depois de 300px e mudar o flex-direction: column.

Mto boa a soluçao, parabens!

👋 Espero ter ajudado e continue no foco!

1

@fernandohmg

Posted

@correlucas E aí irmão! Obrigado! Resolvi o problema. Olhos de águia haha Resolvi alterando o display do componente de preço de inline para block quando a resolução é abaixo de 300px. Evitei ao máximo criar elementos HTML só por razão de estilo, por isso não usei flex. Obrigado pela dica!

1

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