I am a newbie i used css flexbox and media qureys for this project.
Design comparison
Solution retrospective
I want to know how can we give body hight without using 100vh.
Community feedback
- @AdrianoEscarabotePosted over 2 years ago
Hello everything is fine?
I really liked the result of your project, you said you are a beginner, but you really did a good job. I have some tips for you:
1- You can choose the height in different ways and different measurement units, but really the most suitable is
min-height: 100vh;
, but it has reasons to be considered the best way, one of them for example is that the100vh
completely fills the screen regardless of screen size.I advise you to color your body
min-height: 100vh;
and adjust the elements, you will get a better result.Hope it helps... π
Marked as helpful1@ayush111222Posted over 2 years ago@AdrianoEscarabote Thanks alot for your review yes i am a begginer and i am here to learn and to get help from people like you thanks a lot man have nice day.
0 - @correlucasPosted over 2 years ago
πΎHello @ayush111222, congratulations for your new solution!
Your solution is great but you're having some issues, because you've set the container size in the body, you need to replace all these values. I'll give you the step-by-step used to create my solution with
grid
and the alingment.First of all add to the
body
min-height: 100vh
to make the body display 100% of the browser screen size anddisplay: flex
eflex-direction: column
to align the child element (the container) vertically using the body as reference.To build this component with 2 columns all you need to do is create a main block to hold all the content (you can use
<main>
to wrap), set itswidth
asmax-width: 900px
(it's the container size) anddisplay: grid
/grid-template-column: 1fr 1fr
(this means that your component will have two columns with 50% of the container width each thats 450px).π I hope this helps you and happy coding!
Marked as helpful0@ayush111222Posted over 2 years ago@correlucas thanks a lot mate i will try it and i am a begginer so i can make mistakes :) but i am getting so much help from you guys thanks and have nice day.
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