Help on Portfolio Project

bensrd · October 22, 2017, 9:55pm

Hey there! When I removed the position:fixed, bottom:0 part of the .navibar CSS section, the navigation bar goes back up and spans perfectly across the page. Thing is I would love to have the same span but at the bottom: can anyone help? https://codepen.io/bensrd/pen/wrZrRo

Emgo-Dev · October 22, 2017, 10:08pm

MDN absolute Positioning
Most of the time, absolutely positioned elements that have height and width set to auto are sized so as to fit their contents. However, non-replaced absolutely positioned elements can be made to fill the available vertical space by specifying both top and bottom and leaving height unspecified (that is, auto). They can likewise be made to fill the available horizontal space by specifying both left and right and leaving width as auto.

MDN fixed Property
The element is removed from the normal document flow; no space is created for the element in the page layout. Instead, it is positioned relative to the screen’s viewport and doesn’t move when scrolled. Its final position is determined by the values of top, right, bottom, and left. This value always creates a new stacking context. When an ancestor has the transform or perspective property set to something other than none, that ancestor is used as the container instead of the viewport (see CSS Transforms Spec). In printed documents, the element is placed in the same position on every page.

It’s safe to say that you should expect this behavior when you treat your elements as absolute components of the viewport so to speak and not to flow with your content.

You can get away with keeping your height set to auto to flow around your content, but if you want your bar to span the page, well it’s no longer behaving like a block element within the flow of a page, because there is no more flow for this element. Set it’s width to either 100%, or 100vw. 100% takes up the full content area of it’s parent element, where 100vw sets the width of the element to the pixel width of the viewport.

bensrd · October 23, 2017, 4:55am

Thanks for the insight! I tried setting to 100% but there is still a gap on the right side, how can that be ? ^^

owel · October 23, 2017, 5:37am

Your code, i.e. use of bootstrap is very confusing. I suggest look at bootstrap examples and review them again.

That said, a quick fix to your problems:

why do you have a div class container-fluid enclosing the body tag? Remove this div tag outside your body tag.
Under class about-beauty, remove the row class in the inner div.
In your menu, remove the row class
on your photo, add class img and img-responsive.

<link href="https://fonts.googleapis.com/css?family=Cutive+Mono" rel="stylesheet">
<!--Below is HTML-->

<body>
<!--Welcome page-->
  <div class="content1">
    <section>
      <h1>The Tribe Project</h1>
 <div class="navibar text-center">
      <nav>
        <div class="col-md-4"><a href="#about">About</a></div>
        <div class="col-md-4"><a href="#projects">Projects</a></div>
        <div class="col-md-4"><a href="#contact">Contact</a></div>
</nav>
      </div>
    </section>
  </div>

<!--Description of the beast-->
<div class="content2">
  <section id="about"></br>
  <div class="about-beauty">
        <h2 class="no-padding">About</h2>
    <div>
      <div class="col-md-6"><p>This is where I will insert my description:</br>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam finibus efficitur ex, quis ultricies tellus tincidunt et. Suspendisse in justo sollicitudin, feugiat lorem sit amet, tincidunt ex. Proin commodo convallis massa semper feugiat. Pellentesque suscipit lacus nibh. Mauris augue ipsum, luctus non ultrices vitae, tempus a ante. Pellentesque sed cursus enim. Nulla lorem lacus, condimentum vitae ipsum nec, ultrices sodales ipsum. Sed scelerisque justo a hendrerit eleifend. Ut pellentesque elementum purus quis eleifend. Nullam ultrices aliquet ante, et dignissim dolor tempus id. Etiam vel ultricies ligula. Aliquam accumsan, sapien at placerat lacinia, neque libero malesuada tortor, vel blandit turpis enim eget augue.</p></div>

  <div class="col-md-6"><p>This is where I will insert a picture 
    </br>
  <img src="https://scontent.fbru1-1.fna.fbcdn.net/v/t1.0-9/18921802_10210577252641306_6701235264136374213_n.jpg?oh=d52952f79b6492f59134231babb18b8c&oe=5A7DB9BF" alt="lol" style='height: 100%; width: 90%; object-fit: contain'/>
  </div>
  
  </div>
  </div>
      </section>
  </div>

<!--Description of the projects-->
<div class="content3">
    <section id="projects">
        <h2 class="no-padding">Projects</h2>
        <p>This is where I will introduce the projects I am or have been working on, using thumbnails and placeholders</p>
        </section>
  </div>
      
<div class="content4">
    <section id="contact">
        <h2 class="no-padding">Contact</h2>
        <p>This is where I will insert links for people to find me on social media, using buttons and links to other websites</p>
      </section>
  </div>
  
  </body>

Really, review how to use bootstrap properly.

bensrd · October 23, 2017, 6:04am

Wow thank you for this answer, it really helped! I thought class=“container-fluid” was necessary to make your code bootstrap-responsive. I also thought that class=“row” was needed to make use of the grid to place elements on the page. When you say the use of bootstrap is confusing, are you talking about the Javascript section or the general use within the code?

Also, I was wondering if it’s better to create a forum thread to ask all the questions about my portfolio project or if it makes more sense to create a thread for each question, I’m new here so what do you think?

Again, thank you very much !

pseudop · October 23, 2017, 12:42pm

bootstrap grid classes correlates with each other.
problem started when you removed .container-fluid's paddings because you render .row class useless (that’s why a gap occured on the element’s right side). if you look at .row styles, it has margin: 0 -15px which stretches out .row to left and right. instead of removing .container-fluid's paddings, you should have just added a .row inside it to cancel out its paddings.
basic structure works like this:
columns are nested inside rows, and rows are nested inside containers

<div class="container">
  <div class="row">
    <div class="col-sm-6">column1</div>
    <div class="col-sm-6">column2</div>
  </div>
  <div class="row">
    <div class="col-sm-6">column1</div>
    <div class="col-sm-6">column2</div>
  </div>
</div>