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

Product-preview-card-component with SASS

@paupalazzesi

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

@paupalazzesi

Posted

Hola Hector! Me fije y tenía el browser en 80%, entonces visualizaba todo más chico de lo que realmente era. Gracias por el comentario porque me hizo dar cuenta de eso para todos los challenges. Saludos.

0

TITOR 340

@hectorestebanm

Posted

Hola Paula, veo que te sirvió la observación. Un consejo para la imagen, que no note la vez anterior por si querés mejorarlo. Que uses la etiqueta picture. Te dejo un ejemplo de como podrías usarlo en tu proyecto.

<picture> <source srcset="images/image-product-desktop.jpg" media="(min-width: 600px)"> <img src="images/image-product-mobile.jpg" alt="Blog"> </picture>

Lo que hace picture es comenzar con la imagen por defecto en img, y dependiendo del tamaño de la pantalla la ira cambiando sola. En el ejemplo comenzarías con la vista mobile, y a medida que aumentas el tamaño de la pantalla cambiaria a desktop cuando sea mayor a 600px. Estos valores los podes modificar a tu gusto, son solo a modo de ejemplo, pero te van a servir mucho para futuros desafíos.

Espero te sirva este tips, saludos.

Marked as helpful

0
TITOR 340

@hectorestebanm

Posted

Las etiquetas deberían estar en ingles, pero me quedaron traducidas en español, perdón, cuando las copie estaban bien escritas.

0
TITOR 340

@hectorestebanm

Posted

Hola Paula, como estás? Estaba viendo tu página y note que te quedo con unos márgenes muy grandes, igual para el tamaño de las fuentes. Prácticamente tu tarjeta ocupa toda la pantalla, no se si era tu idea hacerlo así, salvo que no se te hayan cargado bien todos los archivos SASS.

Otra cosa que note es que tuve que bajarle el zoom del 100% al 75% a mi pantalla, y recién ahí la página quedo como en el desafío. Como prueba intenta ver la página en otra pantalla distinta para que veas si te hace lo mismo. Quería comentarte esto nomás, el resto esta perfecto. Saludos.

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