Design comparison
Solution retrospective
Pls bear with the messy CSS, I got a doubt:
- How do you vertically position the card without causing scrolling, like I played with all kinds of values with height, but no change (Eventually I resorted to just copy pasting a code I found on yt, which I have no idea how it worked)
If u are kind enough, pls review through my code. Thanks for your feedback!
Community feedback
- @danielmrz-devPosted 11 months ago
Hello @Johan-Jubin!
Your project looks great!
About your question:
- When you add
height: 100vh;
to the body, it means that all the content inside of will ocuppy the full height of the screen (100% of the viewport height - vh). If your content height is not higher that the screen, there won't be a scrollbar. So what you did is right.
I have one more thing to say:
- Since the image is a clickable element, it's a good practice to add
cursor: pointer
to it.
Other than that, my friend, you did an excelent job!
Marked as helpful1@Johan-JubinPosted 11 months agoThanks @danielmrz-dev for your valuable feedback!
I never knew about vh units before until now. Btw, is there any other way to position a div/element vertically without vh?
Like in my case, initially, I tried percentages, but it brought no change to the card (ig
display:flex;
may have a role in it). Then I tried px units, thought it wouldn't be quite responsive. Then finally I put vh units copied from yt.So my doubts is Are there any other means to vertically position an object? (we can use
margin:auto
for horizontal position, but anything for vertical position?)1@danielmrz-devPosted 11 months ago@Johan-Jubin
There is. You can also use
position
andtransform
to move an element from its original position. For example, you can center an element like this:.element { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
In which
transform: translate(*horizontal axis*, *vertical axis*)
.This one is a bit harder to deal with, but in simple projects with one centered element, is very useful.
1 - When you add
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