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

Responsive product preview card component using flexbox

@derickcjesus

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


In the coding process, I solidified the knowledge I already had in HTML and CSS. I didn't have that much difficulty, but while developing the desktop version, I didn't realize that the zoom was negative, which left the desktop version with a large product preview card component.

How do I solve this in a simple way?

Community feedback

Daniel 🛸 44,230

@danielmrz-dev

Posted

Fala, Derick! Teu projeto ficou show, amigo!

Pra resolver o tamanho da versão desktop, tenta definir altura e largura fixos pro card na versão 1440px. Quando você usa porcentagem, esse tamanho excessivo pode acontecer.

Depois de fazer isso, você diminuir também um pouco das fontes também. Vi ali que você colocou, por exemplo, font-size: 4em pros h1 do container component.

Isso já deve resolver o tamanho do seu card. Tenta aí e me diz se deu certo!

Espero que ajude! Abraço!

Marked as helpful

0

@derickcjesus

Posted

Primeiramente, obrigado! @danielmrz-dev

Já tinha em mente essa solução, seu comentário só me deu um "gás" a mais pra finalizar haha.

Deixei o card um pouco grande de propósito, pois achei o tamanho do design pequeno.

Abração!!!

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