Trouble with make height of welcome-section equal to viewport

I am working on the Beta side Front-End Developer Portfolio challenge. task #2 under Layout says, "The height of the welcome section should be equal to the height of the viewport. I set the height = 100vh and this makes the test pass. However when you resize the page the first row pushes down the content of the second row or sometimes the first row content goes underneath the 2nd row. I have been searching professor Google and StackOverflow for about three days and cannot figure this one out. If you change the height of the welcome-section to anything else, it works fine but will not pass the test. So any ideas? Thanks.

See the Pen Personal Portfolio Work-Beta by Chuck Hamer (@MrChuckHamer) on CodePen.

in your html hierarchy, your #info row is on the same level as your #welcome-section row, so it should be expected that #info will be pushed all the way down like that.

Essentially, whatever you want to be visible on the page on initial load, prior to scrolling, will need to be contained within the #welcome-section (think of it as a wrapper)

Are you saying each row needs to be in its own container-fluid? I guess I do not follow what you mean by hierarchy? All the rows are set up the same, but this is the only row that has content that dives down into the other row. I have another fork of the project with each row in its own container and it does the same thing. So what are you suggesting is the fix?

try changing this:

  <div class="container-fluid" >
    <div class="row" id="welcome-section">

…to this:

  <div class="container-fluid" id="welcome-section">
    <div class="row">

…and you should see what I mean

First, thank you @fentablar for your time. I made the change you suggested, but I have the same outcome. If I collapse the windows horizontally the content from the top row slides underneath the second row. If i collapse the screen vertically then the content in the first row pushes the second row down. This is frustrating. Makes me feel like I have a syntax error somewhere that I cannot find. Again if I simply get rid of the #welcome-section height: 100vh; line all my problems go away. :frowning:

just took another look at your codepen and it seems you made another change beyond specifically what I was suggesting. So, rather than continuing on that track it’s probably easier to eliminate confusion and take it from the 30k-foot view.

To get back to my point about hierarchy – think of a bulleted list with multiple levels, e.g.:

Bullet List
1. item one
    a. item one, sub item a
    b. item one, sub item b
2. item two
    a. item two, sub item a
    b. item two, sub item b

if you think of each item and sub item as a div, you can see that within div 1 there are two divs, a and b, and the same follows that div 2 has sub items div a and div b

what you’re doing in essence is telling item 1 to take up all of the screen height (100vh), which causes item 2 to be pushed beneath the viewable portion of the page when it first loads. So, any content that you want to ensure is included in that viewable section needs to be contained within item 1, i.e., sub item a, sub item b, and so forth.

the way you’ve set your code up when I first looked at the codepen and when I looked at it again just now, you have your “info” row effectively set as item 2, which means it’s not going to show up in the viewable page on initial load since you have item 1 set up to be 100vh.

In other words, you want your “container-fluid” div to be the “welcome section” and you want each of your “row” divs to be contained within the “container-fluid”/“welcome-section” div.

O.K. So I think I have the code back to where it should be. After your first reply I kinda went nuts trying different things. I moved the #welcome-section to the .container-fluid which contains all my div rows. I believe this is what your explanation is telling me. When I do this I get a different issue. Now the content below the welcome section does not show, probably because of the 100vh again.

in a nutshell that’s what’s going on, which you can fix by using min-height instead of height. I’m not sure if that screws up the requirements for the beta challenge tho, haven’t looked at the beta stuff yet.

yeah, I tried the min-height property already. I even tried to put the height: 100vh commented out and see if I could trick the test, that didn’t work. I guess I need a new simple design for my welcome row, maybe a random IT background image with a circle head shot of myself. :grin:

you could also give the #welcome-section an overflow property, like overflow: auto or overflow: scroll, but that kinda screws up the aesthetics imo.