Personal Portfolio Project Guidance Needed

Code Feedback
1

Hi everyone! I am currently working on my portfolio page and I keep running into a couple issues. Any help or guidance is greatly appreciated!

  1. I discovered that when i scale the browser window down, at one point the nav bar gets messed up. Buttons begin stacking beneath one another, as well as my name, which the height of the nav bar remains the same. Where am I going wrong?

  2. How can I vertically center the text in the About Section?

Thank you for any feedback!

—Andrew

HTML:

<div class="container-fluid fixed-nav-bar">
  <div class="row">
    <div class="nav-content col-xs-6">
      <a class="dark-text" href="#">andrew troche</a>
    </div>
    <div class="col-xs-6 text-right">
      <button class="button" href="#about">.about</button>
      <button class="button" href="#portfolio">.portfolio</button>
      <button class="button" href="#contact">.contact</button>
    </div>
  </div>
</div>

<div class="container-fluid content1">
  <img class="large-image" src="https://s5.postimg.org/qxwd2a05j/Coffee_Laptop.jpg">
  <div class="content-about">
    <p>Hi.  I'm Andrew, and I design websites.  Since the early days of the Internet, web design has been a secret passion of mine.  Now, it's my life's work.<br/><br/>
      I hope you enjoy!</p>
  </div>
</div>

<div id="portfolio">
</div>

<div id="contact">
</div>

CSS:

body {
background-color: #F2F1ED;
background-color: rgba(242, 241, 237, 1);
color: #333333;
color: rgba(51, 51, 51, 1);
font-family: Veranda, Arial, Sans-serif;
padding-top: 56px;
}

/TOP NAVIGATION BAR/

.fixed-nav-bar {
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 100%;
height: 56px;
background-color: #333333;
background-color: rgba(51, 51, 51, 1);
color: #F2F1ED;
color: rgba(242, 241, 237, 1);
font-family: “Raleway”, “Veranda”, “Arial”, “Sans-serif”;
}
.nav-content {
font-size: 35px;
color: #F2F1ED;
color: rgba(242, 241, 237, 1);
font-family: “Raleway”, “Veranda”, “Arial”, “Sans-serif”;
}
a:link {
color: inherit;
text-decoration: none;
}
a:visited {
color: inherit;
text-decoration: none;
}
a:hover {
color: inherit;
text-decoration: none;
}
a:active {
color: inherit;
text-decoration: none;
}
.button {
background-color: rgba(0, 0, 0, 0.0);
font-size: 20px;
color: #F2F1ED;
color: rgba(242, 241, 237, 1);
}
.button:hover {
background-color: ##ACAAA1;
background-color: rgba(172, 170, 161, 1);
color: #F2F1ED;
color: rgba(242, 241, 237, 1);
}

/ABOUT SECTION/

.large-image {
float: left;
width: 50%;
height: 50%;
background-color: #E6DFA9;
background-color: rgba(230, 223, 169, 1);
}
.content1 {
background-color: #E6DFA9;
background-color: rgba(230, 223, 169, 1);
text-align: center;
margin-left: -15px;
}
.content-about {
font-size: 23px;
text-align: center;
font-family: Gloria Hallelujah, cursive, sans-serif;
}

Codepen: http://codepen.io/andrewtroche/pen/pNExQa

2

Since you’re using Bootstrap, I would try to use the many classes they provide and only use CSS for the parts needed. That way you can rest assured that your site is fully responsive.

  1. They already provide a sticky navbar using class="navbar-fixed-top. source: fixed navbar top. As for why buttons begin stacking, it’s because you have all of them under the div with class="col-xs-6". There are a few options you have. Try creating a hamburger menu - go to the default navbar to see what I mean (resize the screen). They have other options there too that you can choose from.
  2. Check this out: centering in CSS. For horizontal centering, use class="text-center" or class="center-block". source: center content blocks

EDIT: Also, it certainly helps to get a deep understanding of the Bootstrap grid system and all its components. I thought I “understood” Bootstrap, but when I played around with it further and read the docs, I learned a lot more, correcting any misconceptions I had and going past the surface-level knowledge I had.

3

Thank you @nimalen for the feedback! You’ve helped me tremendously!

1 Like