CODEWITHSUNDEEP
htmlcss
Nellington
Nellington

Reputation: 221

Can't change background on a footer

I'm trying to make the background of my footer dark grey. Here's the HTML:

<footer>
    <div class="row">
       <div class="col span-1-of-2">
            <ul class="footer-nav">
                <li><a href="#">XYZ</a></li>
                <li><a href="#">XYZ</a></li>
                <li><a href="#">XYZ</a></li>
                <li><a href="#">XYZ</a></li>
                <li><a href="#">XYZ</a></li>
            </ul>
        </div>
        
        <div class="col span-1-of-2">
            <ul class="social-links">
                <li><a href="#"><i class="ion-social-twitter icon-small"></i></a></li>
                <li><a href="#"><i class="ion-social-facebook icon-small"></i></a></li>
                <li><a href="#"><i class="ion-social-instagram icon-small"></i></a></li>
                <li><a href="#"><i class="ion-social-google icon-small"></i></a></li>
            
            </ul>
        </div>
      
    </div>
</footer>

and here's the CSS:

footer {
background-color: #555;}

I think it's because the information in the two divs is covering up the footer. However, I've tried giving the divs their own class names and using the 'inherit' property and it hasn't worked. If anyone could give me some advice I'd very much appreciate it.

Upvotes: 1

Views: 706

Answers (4)

FreddyNoNose
FreddyNoNose

Reputation: 445

Unable to comment but I will provide this link where it is working as expected.

footer {
    background-color: #555;
}
<footer>
    <div class="row">
       <div class="col span-1-of-2">
            <ul class="footer-nav">
                <li><a href="#">XYZ</a></li>
                <li><a href="#">XYZ</a></li>
                <li><a href="#">XYZ</a></li>
                <li><a href="#">XYZ</a></li>
                <li><a href="#">XYZ</a></li>
            </ul>
        </div>
        
        <div class="col span-1-of-2">
            <ul class="social-links">
                <li><a href="#"><i class="ion-social-twitter icon-small"></i></a></li>
                <li><a href="#"><i class="ion-social-facebook icon-small"></i></a></li>
                <li><a href="#"><i class="ion-social-instagram icon-small"></i></a></li>
                <li><a href="#"><i class="ion-social-google icon-small"></i></a></li>
            
            </ul>
        </div>
      
    </div>
</footer>

Codepen

Upvotes: -1

KnottyDreadLox
KnottyDreadLox

Reputation: 39

I know this might sound silly, but if you are running it on your browser to check, May I suggest deleting your browsing history?

I've had issues in the past which make my head scratch only to realize the solution is solved after I delete my browsing history (mainly the cache).

Upvotes: 0

Lion
Lion

Reputation: 11

Solution

Hi there! When I put only the code you provide to us in here http://www.play-hookey.com/htmltest/ A grey footer is created. I can only conclude that another command is overriding yours. The easiest way to fix this is by making it important

 footer, footer{
        background-color: #555 !important;
  }

This is however, bad practice, and you should troubleshoot before doing that

Troubleshooting

  1. Try putting your footer styling below all other styling, the browser might be reading something else and overwriting your code
  2. Its not good practice but you could use inline styling
  3. Or you can create a class and apply it to your footer, as those rank above styling the element

Upvotes: 1

Professorval
Professorval

Reputation: 323

Add an "important" to the rule setting the background-color of the footer and you're set to fly:

<style type="text/css">
  footer, footer div {
        background-color: #555 !important;
  }
</style>

Upvotes: 3

Related Questions