Hello Duchessa. Good job completing this challenge 🎉🎉🎉.
I see that you have good basics in front-end and the result is great.
I will try answer your questions to the best of my abilities and give you some small advises:
- First of all about the "centering". I think that you were really close to the solution because I can see that you already know about the
margin: auto trick with flexbox which worked on the inline axis (horizontal) already. However to make it work on the block axis you need to give a height (or in this case a min-height) to the body element.
the code would look something like this:
body {
/* KEEP Previous styles ... */
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center
}
main {
/* REMOVE previous styles */
margin: auto; /* Put the main in the center & push footer at the bottom */
padding: 1rem;
width: min(100%, 40rem);
}
You can remove every over margin: auto in your css and all max-width.
Note: the property width: min(100%, 40rem); is a shorthand for width: 100%; max-width: 40rem;
- If you look closely, the border-radius is not "applied" to the image in the
.product-card. It happens because the image overflows its container and does not have a border-radius itself. Rather than giving it a border radius you can add the property overflow: hidden to the .product-card which will hide the sharp edges of the image that are "outside" of the section.
- The image looks distorted when the screen's width is between 380px and 575px. To fix that add the property
object-fit: cover to the .product-img class.
- I would suggest that you add a little transition on the "Add to cart" button for the hover effect. It could be something like this:
.add-to-cart {
/* KEEP previous styles */
transition: 300ms background-color linear;
}
You can play with the duration and the timing-function as you like until you find something that you like 👍
- And finally here is an example of a picture element from one of my solutions :
<picture>
<source media="(max-width: 649px)" srcset="./src/assets/mobile/image-header.jpg" />
<img
class="header__image"
src="./src/assets/desktop/image-header.jpg"
srcset="./src/assets/desktop/image-header.jpg"
alt="An orange sliced in half" />
</picture>
That's it. I hope it helps. Have a nice day/night and happy coding 😊
