Bootstrap footer with columns losing background

Question

0.00/5 (No votes)

See more:

Basically I have made a footer with a black background. I have 3 Col-4's in it with various info in them. On the desktop it looks fine, but on mobile, the columns stack, which I want. When they stack the footer doesn't go further so it has a large white section underneath. I was wondering if anyone could take a look and suggest something. The codes probably messy, as i am a newbie.

HTML
<!-- css

CSS

#footer {
	height: 200px;
	position: absolute;
	bottom: 0;
	background-color: #000000;
	width: 100%;

}





}

HTML

 <footer>
      <div class="container-fluid">
      <div class="row">
 <div class="col-sm-4 col-md-4">
<br>
<br>
Home<br>
Services<br>
Gallery<br>
About<br>
Contact
 </div>
  <div class="col-sm-4 col-md-4">
      <aligncenter>Check Out Our Other pages</aligncenter><br>
      <aligncenter2><img src="Facebook-icon.png" width="50" height="51" alt=""/><br>
    <img src="YouTube-icon-full_color.png" width="50" height="36" alt=""/><br>
    <img src="new-instagram-icon-topic.png" width="50" height="48" alt=""/></aligncenter2>
 </div>
 <div class="col-sm-4 col-md-4">
      <div class="container-fluid" <br>
<br>
<alignright>
Registered office<br>

14 Stott Court<br>

Tweedmouth<br>

Berwick-Upon-Tweed<br>

Northumberland<br>

TD152YP
</alignight>
      </div>

-->

Posted 22-Sep-16 22:05pm

Member 12755459

Updated 23-Sep-16 4:04am

v3

Add a Solution

Comments

David_Wimbley 23-Sep-16 8:57am

Can you post the complete footer HTML? I pasted it into VS and it is missing closing tags, you've got some tags mispelled so it doesn't know it has been closed, and I don't know what aligncenter elements are...not sure if thats something you've made or what but there is a lot of unknowns here.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Answer 1 · 2016-09-23T04:04:00

The problem is, you've set the height of the footer element to 200px.

When the columns stack, their combined height increases beyond 200px. The background stops at 200px, because that's the height of the footer element. But the content overflows the footer element, because you haven't told it not to.

Example 1 - height[^]

To fix it, you can either use a media query to change the height when the columns stack, or replace the height property with min-height.

Example 2 - min-height[^]