Product preview card component (Modificado según recomendaciones)
Design comparison
Solution retrospective
Hola, cargue nuevamente el proyecto, con algunas correcciones según sugerencias, agregue el arhivo readme.md.
Community feedback
- @cyeguezPosted about 2 years ago
Hola muchas gracias, me funciono el fragmento de código, estaba observando el cambio de imagenes en el navegador en la parte de red, asumo que la carga es mas optima.
<div class="card-img"> <picture> <source media="(max-width:799px)" srcset="./images/image-product-mobile.jpg"> <img src="./images/image-product-desktop.jpg" alt="img product"> </picture> </div>0@JorggyhPosted about 2 years ago@cyeguez sí, olvidé agregar la carpeta
images
dentro de la ruta, me alegro de que lo hayas notado.0 - @JorggyhPosted about 2 years ago
Another tip, your repository on github has two branches:
- main
- master (used to be the default, but now github has changed it to main, but git (on your local machine) remains master).
You can work on master, or any other, but to post the project you must switch to main, in terminal you can change the branch with
git branch -m main
.To change the default in your git, so you don't have to change it in every project, you can do it with git config --global init.defaultBranch main` in your terminal.
Redme should be in the root of the project, along with index.html, and the images, styles folders
If you want to see my repository to get an idea: https://github.com/Jorggyh/product-preview-card-component
0 - @JorggyhPosted about 2 years ago
Hello, good work!
One tip: The project should have two images, this one for the mobile version, and another higher one for the desktop version, you can add both with the
picture
tag inside the html, or by css withbackground-image
.Try this, remove your img and put this in place:
<picture> <source media='(max-width: 799px)' srcset='images/image-product-mobile.jpg' type='image/jpg'> <img alt=' ' images/image-product-desktop.jpg'> </picture>
Tell me later if it worked.
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