Product-preview-card-component with SASS
Design comparison
Community feedback
- @paupalazzesiPosted 8 months ago
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@hectorestebanmPosted 8 months agoHola 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 helpful0@hectorestebanmPosted 8 months agoLas etiquetas deberían estar en ingles, pero me quedaron traducidas en español, perdón, cuando las copie estaban bien escritas.
0 - @hectorestebanmPosted 8 months ago
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 GitHubJoin 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