Skip to content
Submitted over 1 year ago

Tarjeta producto

AmineMsa•20
@AmineMsa
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

-Hola buenas este es mi proyecto pero tengo problemas a la hora de verlo en el movil y tambien no se como hacerlo responsive para ordenador. -SI alguien me puede ayudar

Community feedback

  • Steve•1,170
    @peanutbutterjllyPosted over 1 year ago

    para el 'body', poner:

    height: 100vh;
width: 100vw;
display: grid;
place-items: center;

    para su div con la clase de 'tarjeta' poner:

    display: flex;
padding: 0;
width: 700px;

    para su div con la clase de 'tarjeta__imagen' poner:

    flex: 1;
border-radius: 20px 0 0 20px;
background-image: url(../images/image-product-desktop.jpg);
background-size: cover;
max-width: 375px;

    y para su div con la clase de 'tarjeta__info' poner:

    flex: 1;
max-width: 350px;
padding: 1em;

    esto debería ayudar para el diseño de escritorio, te ayudaré con el móvil más tarde

    0
    AmineMsa•20
    @AmineMsaPosted over 1 year ago

    @peanutbutterjlly Muchas gracias compañero mas gente como tu, ¿ me puedes ayudar con el del movil? porfavor

    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