Search code examples
htmlcssjoomlacol

First column of Bullets not appearing in footer

I am having troubles with the footer of the website. The first column of bullets do not appear, but column 2, 3 and 4 appears fine. I have tried using padding and much more but the first column of bullets always do not show.

My Html code is 

<div class="row">
<div class="col" style="text-align: left;"><span style="font-family: 'andale mono', times; font-size: 18pt;">More Info </span>
    <div>
        <ul class="columns" data-columns="2">
            <li style="text-align: left;"><span style="color: #969696;">Our Team</span>
            </li>
            <li style="text-align: left;"><span style="color: #969696;">FAQ</span>
            </li>
            <li style="text-align: left;"><span style="color: #969696;">Careers</span>
            </li>
            <li style="text-align: left;"><span style="color: #969696;">Press/Media</span>
            </li>
            <li style="text-align: left;"><span style="color: #969696;">Terms &amp; Conditions</span>
            </li>
            <li style="text-align: left;"><span style="color: #969696;">Privacy Policy</span>
            </li>
            <li style="text-align: left;"><span style="color: #969696;">Sitemap</span>
            </li>
        </ul>
    </div>
</div>
<div class="col" style="text-align: left;"><span style="font-family: 'andale mono', times; font-size: 18pt;">Get Paid </span>
    <div>
        <ul class="columns" data-columns="2">
            <li style="text-align: left;"><span style="color: #969696;">Create Your Account</span>
            </li>
            <li style="text-align: left;"><span style="color: #969696;">Sell Your Music</span>
            </li>
            <li style="text-align: left;"><span style="color: #969696;">Get a Publishing Deal</span>
            </li>
            <li style="text-align: left;"><span style="color: #969696;">Artist Services</span>
            </li>
            <li style="text-align: left;"><span style="color: #969696;">Success Stories</span>
            </li>
            <li style="text-align: left;"><span style="color: #969696;">Make Money with Afridope</span>
            </li>
        </ul>
    </div>
</div>
<div class="col" style="text-align: left;"><span style="font-size: 18pt; font-family: 'andale mono', times;">Afridope Community</span>
    <div>
        <ul class="columns" data-columns="2">
            <li style="text-align: left;"><span style="color: #969696;">Facebook</span>
            </li>
            <li style="text-align: left;"><span style="color: #969696;">Twitter</span>
            </li>
            <li style="text-align: left;"><span style="color: #969696;">Instagram</span>
            </li>
            <li style="text-align: left;"><span style="color: #969696;">Linkedin</span>
            </li>
            <li style="text-align: left;"><span style="color: #969696;">Pinterest</span>
            </li>
            <li style="text-align: left;"><span style="color: #969696;">Blog</span>
            </li>
        </ul>
    </div>
</div>
<div class="last" style="text-align: left;"><span style="font-size: 18pt; font-family: 'andale mono', times;">Account Services</span>
    <div>
        <ul class="columns" data-columns="2">
            <li style="text-align: left;"><span style="color: #969696;">Login</span>
            </li>
            <li style="text-align: left;"><span style="color: #969696;">Register</span>
            </li>
            <li style="text-align: left;"><span style="color: #969696;">Contact Us</span>
            </li>
            <li style="text-align: left;"><span style="color: #969696;">Help</span>
            </li>
        </ul>
    </div>
</div>

And my css code is

.footer-bottom {
border-top: 1px solid #000;
text-align: center;
background: #0a0a0a;
height: 345px;
padding-left: 50px;
}

Hoping that someone can be of assistance. Thank you!

Solution

  • Without additional CSS, it is hard to comment but I suspect , based on the classes you are using that the wrapping divs are floated.

    That being the case the first bullets would be outside of the container and thus, probably not visible.

    You can make the bullets appear inside the li by using list-style-position: inside

    * {
  margin: 0;
  padding: 0;
}
.row {
  overflow: hidden;
}
.col {
  float: left;
}
ul,
li {
  list-style-position: inside
}
    <div class="row">
  <div class="col" style="text-align: left;"><span style="font-family: 'andale mono', times; font-size: 18pt;">More Info </span>
    <div>
      <ul class="columns" data-columns="2">
        <li style="text-align: left;"><span style="color: #969696;">Our Team</span>
        </li>
        <li style="text-align: left;"><span style="color: #969696;">FAQ</span>
        </li>
        <li style="text-align: left;"><span style="color: #969696;">Careers</span>
        </li>
        <li style="text-align: left;"><span style="color: #969696;">Press/Media</span>
        </li>
        <li style="text-align: left;"><span style="color: #969696;">Terms &amp; Conditions</span>
        </li>
        <li style="text-align: left;"><span style="color: #969696;">Privacy Policy</span>
        </li>
        <li style="text-align: left;"><span style="color: #969696;">Sitemap</span>
        </li>
      </ul>
    </div>
  </div>
  <div class="col" style="text-align: left;"><span style="font-family: 'andale mono', times; font-size: 18pt;">Get Paid </span>
    <div>
      <ul class="columns" data-columns="2">
        <li style="text-align: left;"><span style="color: #969696;">Create Your Account</span>
        </li>
        <li style="text-align: left;"><span style="color: #969696;">Sell Your Music</span>
        </li>
        <li style="text-align: left;"><span style="color: #969696;">Get a Publishing Deal</span>
        </li>
        <li style="text-align: left;"><span style="color: #969696;">Artist Services</span>
        </li>
        <li style="text-align: left;"><span style="color: #969696;">Success Stories</span>
        </li>
        <li style="text-align: left;"><span style="color: #969696;">Make Money with Afridope</span>
        </li>
      </ul>
    </div>
  </div>
  <div class="col" style="text-align: left;"><span style="font-size: 18pt; font-family: 'andale mono', times;">Afridope Community</span>
    <div>
      <ul class="columns" data-columns="2">
        <li style="text-align: left;"><span style="color: #969696;">Facebook</span>
        </li>
        <li style="text-align: left;"><span style="color: #969696;">Twitter</span>
        </li>
        <li style="text-align: left;"><span style="color: #969696;">Instagram</span>
        </li>
        <li style="text-align: left;"><span style="color: #969696;">Linkedin</span>
        </li>
        <li style="text-align: left;"><span style="color: #969696;">Pinterest</span>
        </li>
        <li style="text-align: left;"><span style="color: #969696;">Blog</span>
        </li>
      </ul>
    </div>
  </div>
  <div class="last" style="text-align: left;"><span style="font-size: 18pt; font-family: 'andale mono', times;">Account Services</span>
    <div>
      <ul class="columns" data-columns="2">
        <li style="text-align: left;"><span style="color: #969696;">Login</span>
        </li>
        <li style="text-align: left;"><span style="color: #969696;">Register</span>
        </li>
        <li style="text-align: left;"><span style="color: #969696;">Contact Us</span>
        </li>
        <li style="text-align: left;"><span style="color: #969696;">Help</span>
        </li>
      </ul>
    </div>
  </div>