Skip to content
Submitted almost 3 years ago

CSS Flexbox

52ymon•30
@52ymon
A solution to the Product preview card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

It looks like I can't center the card as it should be, and I can't get my head around it... It would be greatly appreciated if anyone could give me some pointers :)

Edit: Thanks guys! I'm booking my eye test :')

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • kefiiiiR•70
    @kefiiiiR

    As for the centering of the card on desktop, the problem you are facing is that you used incorrect unit for body height. For height, your are supposed to use vh. Use vw for width only. That should do the job.

    Marked as helpful
  • Osaro Iyoha•1,140
    @osaaroh

    Hey there Szymon,

    Nice work so far. I see you used relative length units "vw" which is great as they scale better. However the issue is with the height value your the <body> tag.

    Instead of height: 100vw you should use height: 100vh

    vw means relative to the width of the viewport and is different from vh means relative of the height of the viewport.

    You can check these links for more info:

    Marked as helpful
  • Account deleted

    If you have separated the image and text into a separate div like me. If you make the image background in css and add position 50% 50% and background-size cover and object-fit cover codes, your image will be placed.

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