Display and Positioning / Broadway / Problem with fixed Footer


#1

Hi there,

I’m having some trouble with one task of the following exercise:

https://www.codecademy.com/courses/learn-css-display-positioning/projects/broadway-design?course_redirect=learn-css

In Task 10 it says:

" If you want to continue coding, challenge yourself to make the <footer> element also fixed to the bottom of the page regardless of scrolling."

I’ve tried a few approaches so far and googled it but couldn’t find a solution. The main issue is once <footer> has been set to position: fixed; it completely disappears! Could anyone give me a hint what’s the problem? :slight_smile:

Here’s the css code:

html, body {
  margin: 0;
  padding: 0;
}

header {
  background-color: #333333;
  position: fixed;
  width: 100%;
  z-index: 1;
  text-align: center;
}

nav {
  margin: 0;
  padding: 20px 0;
}

nav li {
  color: #fff;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 12px;
  display: inline-block;
  width: 80px;
}

main {
  text-align: center;
  position: relative;
  top: 80px;
}

main h1 {
  color: #333;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 70px;
  margin-top: 0px;
  padding-top: 80px;
  margin-bottom: 80px;
  text-transform: uppercase;
}

footer {
  background-color: #333;
  color: #fff;
  padding: 30px 0;
  position: fixed;
}

footer p {
  font-family: 'Raleway', sans-serif;
  text-transform: uppercase;
  font-size: 20px;
}

.container {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 10px;
  text-align: center;
}

.jumbotron {
  height: 800px;
  background-image: url("http://s3.amazonaws.com/codecademy-content/projects/broadway/bg.jpg");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.btn-main {
  background-color: #333;
  color: #fff;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 1.3px;
  padding: 16px 40px;
  text-decoration: none;
  text-transform: uppercase;
}

.btn-default {
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 1.3px;
  padding: 10px 20px;
  text-decoration: none;
  text-transform: uppercase;  
  margin-bottom: 20px;      
}

.supporting {
  padding-top: 140px;
  padding-bottom: 100px;
}

.supporting .col {
  font-family: 'Raleway', sans-serif;
  text-align: center;
  display: inline-block;
  width: 200px;
  height: 200px;
}

.supporting img {
  height: 32px;
}

.supporting h2 {
  font-weight: 600;
  font-size: 23px;
  text-transform: uppercase;
}

.supporting p {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  padding: 0 20px;
  margin-bottom: 20px;
}

.supporting a {
  background-color: white;
  color: #333333;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1.3px;
  text-decoration: none;
  text-transform: uppercase;
  padding: 10px;
  margin-bottom: 10px;
  border: 2px solid #333333; 
}

@media (max-width: 500px) {
  main h1 {
    font-size: 50px;
    padding: 0 40px;
  }

  .supporting .col {
    width: 100%;
  }
}

Sorry if this is posted in the wrong category, it’s my first post and I wasn’t sure were exactly to do it.

Cheers,

Steve


#2

the problem with position: fixed (and absolute) is that they are taken out of normal document flow, so they don’t inherit a width any more, you have to specify the width, otherwise width becomes zero, making the footer look like its vanishing

or it could be hiding behind another element?


#3
footer {
  background-color: #333;
  color: #fff;
  padding: 30px 0;
  position: fixed;
  width: 100%;
  z-index: 10;
}

It wasn’t in the code I previuosly posted but I tried it with a specified width and a high z-index (see code above) but nothing seems to work…


#4

Can you also post your html code? Then i can have a look. Or can i use the default html code in the lesson/project?

edit: the footer is present on the page, but its below the visible content (too far down on the page) (use inspector), you will have to apply some css magic to bring it into view


#5

You can use the default code of the project, didn’t change it. :slight_smile:

I just started with css, so my magic is already exhausted, hehe


#6

i used bottom: 0, that seemed to do the trick


#7

Thank you very much, it works indeed!