Design comparison
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 :')
Community feedback
- @kefiiiiRPosted over 2 years ago
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 helpful0 - @osaarohPosted over 2 years ago
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 useheight: 100vh
vw
means relative to the width of the viewport and is different fromvh
means relative of the height of the viewport.You can check these links for more info:
Marked as helpful0@52ymonPosted over 2 years ago@Master-Osaro Well, looking at it now, I might need some glasses in the future. Thanks ;)
0 - 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.
0
Please log in to post a comment
Log in with GitHubJoin 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