@amallal2004
Latest solutions
Product preview card component
Submitted 7 months agoI need help With responsivity. I used the google extension named "responsive viewer", wich shows the website in different smartphones. With this extension, my website stays good on the screens, but with the google tools when I inspect, don't. So I don't know what causes that difference and what I have to adjust.
Latest comments
- @LucasERMachado
Very good!
- @onlyjustmandyWhat are you most proud of, and what would you do differently next time?
acho que dessa vez ficou mais fácil entender as divisões e os espaçamentos
What challenges did you encounter, and how did you overcome them?usar transição para animar os botões.
- @Sarah-Aljuaid@LucasERMachado
Very good!
- @BayuWinataaWhat are you most proud of, and what would you do differently next time?@LucasERMachado
Hi!
Nice project!
The only thing you can improve is the image. You need to use a mobile image when the user screen is up to a determinate value. To do that, you will need to use the tag <picture> like that example:
<picture class="imagem"> <source media="(max-width: 650px)" srcset="./images/image-product-mobile.jpg" /> <img src="./images/image-product-desktop.jpg" alt="Perfume"> </picture>With that tag, you tell to website to exibit the mobile image when the user screen have a max width of 650px. If user screen is superior of this value, the website will show the desktop image.
Marked as helpful - @owocodedWhat are you most proud of, and what would you do differently next time?
I am happy I finish this project within the shortest period of time.
What challenges did you encounter, and how did you overcome them?little or no challenges
@LucasERMachadoHi!
The project needs to be polished.
Need to added a @media for the display in smartphones. Your project when viewd in a width with 416px, the lines of the nutrition part starts to pass the div max width, breaking the content. As we decrease the page width, it becomes more evident. The same occur with the div "preparation time".
Other thing you need to do is when a smartphone open your website, the website need to fill the entire page. The space between background and the container of the content, doesn't exist anymore for that displays.
Need to add spacement betweeen the things and change the font family default of the website for the fonts presents in the style guide file.
I suggest you to open the design folder and see the mobile-design.jpg to give you a north of what you have to do for the mobile displays.
Marked as helpful - @Ostatidie@LucasERMachado
Really nice result!
