While updating my portfolio page project, I found that the footer’s height gets bigger and stays as background of part of the text from the previous section, the #wellcome-section in this case, when the page is narrower than 1000px (aprox.).
I don’t want that behaviour. How to avoid the footer to change its height in that way and to interfere with the upper section? Why does that happen?
This is one reason I believe having dependencies would make your page fragile nad hard to debug, so like your case with bootstrap.
First I really like your design, really nice. Perfect color scheme. I highly recommend you start a new layout without bootstrap, surely you can do it.
As you mentioned, the problem is about following:
#welcome-section {
height: 100vh;
}
Please mind, bootstrap applies some default styling over tags that in most of the time you really don’t want them. but they could affect your work just as it did too.
I think when screen is narrow, so your welcome-section needs more than 100vh of height, but you forced it as 100vh at any aspect.
The simple fix is using min-height instead of height.
#welcome-section {
min-height: 100vh;
}
This min-height works as applies 100vh when it needs less, but when it needs more, so it gets more, and won’t break your layout.
The issue why it makes the footer larger! so weird! I really don’t know, sorry for lack of knowledge, I never had this issue honestly. But it is like the welcome-section is grabbing some space of footer to render its overflowed content, so it scratch the footer somehow.
Think about my suggestion, start one without bootstrap, it will be super, I believe in you.
Keep going on great work, happy coding.
So, it looks like Bootstrap sets the line-height on the body tag. That line height seems to cause the issue (if you uncheck the property in Dev Tools the footer looks normal. I don’t think overriding that globally would be the best answer, but maybe set the line-height on that specific paragraph similar to
#foot p {
line-height: whatever_looks_good
}
Thank you so much for the answer! 
I will consider redoing it without bootstrap.
Thanks!
I tried setting the line-height for the footer paragraph but that didn’t solve the problem. What did solve it was changing height to min-height for the #welcome-section as @NULL_dev suggested.
I have a hypothesis on why the #welcome-section overflows into the footer and beyond.
It’s not bootstrap, because I am rebuilding the page without it, and the problem remains when #welcome-section has height:100vh. If I change the property to min-height:100vh, there is no overflowing but the page fails the test:
"The height of the welcome section should be equal to the height of the viewport. "
So, when the page narrows up to certain point, the text doesn’t fit in the space given by the 100vh and the narrower width, but the section can’t occupy more than 100% of the height of the viewport because of the style rule, and then it has to invade the footer and also “goes out” from the page.
Please note you may have the width:100vh to pass the test, while you mind the issue it makes as you see about the overflow when contents need more space to render and there is no an7(becasue the height is set constant)
You may consider the test may not compatible in real life for page comes with lengthy section like your case. I believe FCC was thinking about a simple text like “Hello, I’m a developer” for welcome section.
The correct logical way is the min-height:100vh as you tried and it worked.
You may not take it very serious for now dear, and tend to have height:100vh for testing, and min-height for real life.
Happy coding.
Ok. Yes, I am also readjusting the text of the welcome section.
And I am practicing with flexbox for structuring the page, leaving out bootstrap. I think the code is getting cleaner, less cluttered in this way.
Thanks again!