Ask coding questions

← Back to all posts
When I run it and open the full screen, my footer doesn't show.
awelawi (0)

My footer that's supposed to be at the bottom isn't showing. What could be the issue and how do I resolve it?

Answered by InvisibleOne (2979) [earned 5 cycles]
View Answer
InvisibleOne (2979)

Your footer is there, it is just being covered by one of your other div's i think. Try giving it this style:

.footer {
  color: black;
  background-color: grey;
  position: fixed;
  z-index: 2;
  width: 100%;
  height: 100px;
  left: 0;
  bottom: 0;
awelawi (0)

@InvisibleOne It semi-worked. The footer scrolls up with the page(I'm assuming it's the fixed position it was put in). But it should stay fixed to the bottom since it's zero right?Also, the text itself is right: 0, instead of left: 0 like you put in the div styling. Then the footer tag is blocking the caption of the third image from view.
I included an image so you get what I'm saying.

InvisibleOne (2979)

It's probably something to do with the miss indents or your inline styling which could be conflicting with other pieces. I would suggest that you don't use any inline styling and instead put all the styling in the style.css sheet where it can be managed better. I've forked your website and fixed some of the styling conflictions, you can change the colors and styling to how you see fit:, just fork it from me and make your changes. @awelawi

awelawi (0)

@InvisibleOne Thank you for your response. I just thought it will make it faster, and so I don't always have to use a div.

awelawi (0)

@InvisibleOne I'll like to ask, so I styled the header tag(ELBIS... to be a link so that whenever it's clicked it goes back to the homepage). Usually, I'd also style the href link to text-color: black because once a link is visited it turns red by default. I noticed you didn't do that and the color of the link didn't change after visiting it. How was this possible? Because I compared what you did and my previous code and I can't see a difference asides the /index.html.

InvisibleOne (2979)

If you set the color: to something then it shouldn't change after being visited, unless you set it to do that after being visited. @awelawi