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 :')
@kefiiiiR
Posted
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
@osaaroh
Posted
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
@52ymon
Posted
@Master-Osaro Well, looking at it now, I might need some glasses in the future. Thanks ;)
@osaaroh
Posted
@52ymon :D :D
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 thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord
