Design comparison
Solution retrospective
I am proud of that I could make this project using HTML and CSS. I used downloaded fonts in my project for the first time using @font-face property. That was exciting
What challenges did you encounter, and how did you overcome them?I had trouble centering the card. I made the body a flex container and set justify-content and align-items property to center but it was not centered along the cross axis. I didn't know why. Then I set the height to 100% of the html and body element. I got this solution from chatGPT.
What specific areas of your project would you like help with?As mentioned before I had to center the card setting the height to 100% of html and body element. But before this I did QR-code project. There I hadn't used this. It was working totally fine there without setting the height to 100% of html and body element. Please help me understanding this. Why doesn't it always work?
Community feedback
- @DarkstarXDDPosted 5 months ago
- Don't set
height: 100%
on thehtml
. You don't need to set or change any values onhtml
. It could break the site in unexpected ways. - By default
<body>
or<div>
elements won't take the full height of the screen. They will only take the height needed to fit their child elements in. So if you want to center your component on the screen you will have to explicitly tell the<body>
or the<div>
(whatever is the parent element of your component) to take the full height of the screen by usingmin-height: 100vh
.vh
means the viewport height.
Marked as helpful1@Ridwan10000Posted 5 months ago@DarkstarXDD thanks for your suggestion. I had posted this earlier on discord community and got the same solution there.
1 - Don't set
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