Hello,
I am having trouble getting my code to pass this one last test. I have tried to set my height to 100vh in the #welcome-section element, but it still does not pass. I would love any suggestions/feedback.
Hello,
I am having trouble getting my code to pass this one last test. I have tried to set my height to 100vh in the #welcome-section element, but it still does not pass. I would love any suggestions/feedback.
Hello! call me 2T!
I just reviewed your codepen it took me JUST 2 mins to find the problems!! : )
After looking at your CSS file with #main-section,
1: It seemed like you wanted to center the h1 tag with padding in welcome section. Yes you can do it, its one way of centering things but if you ask me I would use things like flex and grid for it : ). Look at my code for a reference.
2: I assume here you have set height of welcome-section to 92vh instead of 100vh intentionally . YOU tried to simply change it to 100vh but the test still failed. Here the reason is possibly the usage of negative margin.
Your code in CSS file:
#welcome-section {
position: static;
height: 92vh;
width: auto;
background-color: #131313;
color: white;
grid-area: about;
font-size: 2em;
margin-bottom: -7em;
padding-top: 5em;
}
h1 {
font-family: "helveticaneue-light", "helvetica neue light", "sans-serif";
font-weight: 20;
margin-left: 2em;
}
My Solution (There are may other ways to solve this!):
Here I removed the negative margin and since I also removed the padding and instead of padding I used flex to center the h1 tag.
Then set h1 tag to flex and centered it with align-items and justify-content (you can do it on your way).
Now examine this solution don’t just skip it using my fix!
My Solution snippet for CSS file (This will pass the freecodecamp suit!):
#welcome-section {
display: flex;
position: static;
height: 100vh;
width: auto;
background-color: #131313;
color: white;
grid-area: about;
font-size: 2em;
}
h1 {
display: flex;
align-items: center;
justify-content: center;
font-family: "helveticaneue-light", "helvetica neue light", "sans-serif";
font-weight: 20;
margin-left: 2em;
}
Also if you are curious how I did this project here is my submission
try adding a display: block
or flex
in there somewhere.
display
is your friend.
hope this helps.
and yes. grids
are good too. box-grids
This solution worked, thank you for your time and effort in helping with this.
So the main take-away here I feel is, the negative margin in my #welcome element was preventing me from passing the test. The negative margin was necessary because I was using padding in my h1. Since we removed the padding and instead used align-items, to center this, it resolved the need to use padding. That in turn allowed me to remove the negative margin. And viola, the test passes!
Hello,
Thank you for the tip, I have not used display: block/flex very much in my projects. I probably need to change that, because you are right, they are very useful.
Thank you again!
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.