Skip to content
Submitted 12 months ago

Responsive product preview card component using flexbox

Derick de Jesus•30
@derickcjesus
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

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,310
    @danielmrz-devPosted 12 months ago

    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
    Derick de Jesus•30
    @derickcjesusPosted 12 months ago

    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

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