@azhar1038
Posted
Hi Wanderson, congratulations in completing the challenge!
To center the card, I see you tried to use flex but then went with transform. You can simply do this:
body {
display: flex;
height: 100vh;
width: 100vw;
align-items: center;
justify-content: center;
}
This will bring your card to center.
I also see that your cart icon is not visible. Your src
should be images/icon-cart.svg
but you have used /images/icon-cart.svg
. The front /
takes to root i.e https://devwanderson.github.io/
.
In the challenge two different product images are provided, one for mobile and other for desktop, you can use <picture>
to specify which image to load on which screen using media query.
You should also make your card more responsive by using min-width
or max-width
instead of fixed width. You should update your media query too so that you switch to mobile view before it compresses to much. Remember the width provided in style-guide are just for reference related to the picture provided or the width that frontendmentor uses to generate screenshot. So, don't just restrict on using those numbers.
Please update your code link too. It gives 404 currently.
Hope it helps :)
Marked as helpful
@DevWanderson
Posted
@azhar1038 Thank you, honestly I ended up getting confused with some properties. I thought the given sizes were the standard to be followed, I'll adapt and upload it on github