Product preview card using grid and flexbox, mobile first approach.
Design comparison
Solution retrospective
I had a lot of trouble switching the images over as the layout changed from mobile to desktop, but with some research I found out how to do it. I wish the transition between the two was a lot more smoother but I'm not sure how to improve that. I tried to be more organised in my coding by adding comments that sectioned/titled the different areas I was working on for the sake of clarity. Overall I enjoyed this project even though it was quite challenging. Any feedback or tips is welcomed. Thanks.
Community feedback
- @Durban86Posted over 1 year ago
I like your code using picture and source tags. It seems to be the way to do achieve faster load times for responsive images. I had used a media query in my CSS to achieve the desired result as I too had to research how to make responsive images and was lead to a different solution, but I'm glad I came across this one as it's appears to be the preferred. Well done!
Marked as helpful0 - @cosmooliveiraPosted over 1 year ago
isso pode te ajudar no caso do tempo das transformações para ficar mais suave. no geral eu achei muito bom utilizou o root para configurações de cores e fez todos os detalhes que estava no projeto e conseguiu até adaptar bem a resoluções para telas menores. acredito que esta indo no caminho certo meus parabéns
é assista o vídeo acho que pode lê ajudar e muito
https://www.youtube.com/watch?v=LUX2qkodA0c
Marked as helpful0@Rgeb1Posted over 1 year agoThanks, I may not understand the language but I can follow along with the video. @cosmooliveira
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