I have a very simple portfolio page. Literally just an html file, a directory with images, and a CSS file.
I have an issue within my CSS styling. When I resize the width of my webpage, everything adjusts responsively and it looks great. However, when the height of the screen is too small, all of the content becomes hidden behind the navigation bar I have on the top of the screen:
If you look on the browser vertical scroll bar used to navigate up and down the web page, I am scrolled all the way to the top, but content from the bottom of my webpage/html skeleton is what is showing right underneath my navigation bar:
You can think of my navigation bar as a section and then the about me as a separate section as that is how they are in the html. Here is the CSS affecting those…
navigation bar section:
.nav {
display: flex;
justify-content: flex-end;
position: fixed;
top: 0;
left: 0;
width: 100%;
background: var(--main-red);
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
z-index: 10;
}
welcome/about me section:
.welcome-section {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
background-color: #000;
background-image: linear-gradient(62deg, #3a3d40 0%, #181719 100%);
}
3
Answers
So, thanks for all the help in identifying the view height was the source of the problem... @all.... although the solution wasn't achieved from calculating the view height, or portioning view height... What I did is just delete the CSS code that specifies the view height and it looks good.
Thanks all!
Your
height: 100vh;
is screwing it up. You can try portioning the vh between your nav and section like below:this happens cause you use the height with 100vh, this means that it will take up the entire screen, including the space behind the navigation bar.
one solution is changing this
This code subtracts the height of the navigation bar, I’m assuming the navigation bar is 60 pixels tall, you can modify to the actual real height, and finally the .welcome-section code looks like this