Me orgulho de ter terminado o desafio o mais parecido que pude. Gostaria aprender a usar o css de forma mais correta eu ainda me perco muito nesse quesito.
What challenges did you encounter, and how did you overcome them?definitivamento o css
What specific areas of your project would you like help with?no código css
It should solve the problem of the card of not being at the centre:
I was trying to focus on semantics and overall readability in my code; how is my semantics and CSS as a whole? Also, I used screenclip and saved the image as a JPEG for the image of the perfume; is this what everyone else does? Finally, I wasn't sure how to "crop" the image without changing its size (for the mobile version); can someone help me with that?
Here is the thing you can consider:
Instead of using 2 <img> tags you should use a <picture> tag:
<picture> <source media="(max-width: 375px)" srcset="./images/image-product-mobile.jpg"> <img src="./images/image-product-desktop.jpg" alt=""> </picture>Here both images are given in a same tag one with a condition of min-width which will be displayed on that condition automatically. You won't need to crop the image. Hope it helps.
Here is my solution for Product Preview Page! I thought it was a simple one but the image was not that easy to deal with because of the mobile or desktop version.
Here is the thing you can consider:
Instead of using 2 <img> tags you should use a <picture> tag:
<picture> <source media="(min-width: 960px)" srcset="./images/image-product-desktop.jpg"> <img src="./images/image-product-mobile.jpg" alt=""> </picture>Here both images are given in a same tag one with a condition of min-width which will be displayed on that condition automatically.
Hope it helps.
My solution is based on grid so I found difficult the part of sizing correctly both rows/columns in the content box, after a few tries it turn out pretty decent, still not that comfy with it... could be better.
Will continue working on my knowledge improvement and maybe in the future add some spiciness to the design! ;)
You can give the height of 100vh to the body element and it will look proper on screen. And at screen width of nearly 1270px the width is too much, you can consider decreasing it.
