Making my completely static footer responsive and stack for mobile without list items disappearing

Question

Any advice for this situation would be appreciated.

At the moment when scaled for mobile, the logo doesn't center. The list titles center perfectly but the list items disappear. In addition, the icons completely cover the copyright banner rather than centering above it.

Here is the fiddle for the code in question.

.fcontainer {
    width: 1200px;
    margin: 0 auto;
    padding-top:30px;
}
.ffooter {
    width: 100%;
    float: left;
}
.col-1,
.col-2,
.col-3,
.col-4 {
    width: 25%;
    float: left;
}
.footer-copyright {
width:100%;
float: left;
}

@media screen and (max-width: 768px) {
  .fcontainer {
      width: 100%;
      margin: 0 auto;
  }
  .col-1,
  .col-2,
  .col-3,
  .col-4 {
    width: 100%;
    float: none;
  }
}
.fcopyright{
  padding-top:270px;
  color:#ffffff;
}

.quicklinkshead{
  font-size:1.5em;
  color:#ffffff;
  font-weight:bolder;
}

.serviceshead{
  font-size:1.5em;
  color:#ffffff;
  font-weight:bolder;
}

.referenceshead{
  font-size:1.5em;
  color:#ffffff;
  font-weight:bolder;
}

.services{
  list-style-type:none;
  margin: 15px 0 15px 0px;
  color: #ffffff;
}
.quicklinks{
  list-style-type:none;
  margin: 15px 0 15px 0px;
  color: #ffffff;
}
.references{
  list-style-type:none;
  margin: 15px 0 15px 0px;
  color: #ffffff;
}
.jaxchamber{
  margin:-115px 185px;
  float:right;
}
.napofoot{
  margin:-115px auto;
  float:right;
}

<footer>
	<div class="fcontainer">
	 <div class="ffooter">
	  <div class="col-1"><img src="images/logofooter.png"></div>
	  <div class="col-2"><p class="quicklinkshead">Quick Links</p>
		<ul class="quicklinks">
				<li>Home</li>
				<li>About</li>
				<li>Services</li>
				<li>Get Started</li>
		</ul>
		</div>
	  <div class="col-3"><p class="serviceshead">Services</p>
		<ul class="services">
				<li>Families</li>
				<li>Senior Cleaning</li>
				<li>Senior Downsizing</li>
				<li>Organizing Services</li>
		</ul></div>
	  <div class="col-4"><p class="referenceshead">References</p>
		<ul class="references">
				<li>Testimonials</li>
				<li>Before / After</li>
				<li>Policies</li>
				<li>Contact Us</li>
		</ul></div>
	 </div>
	 <p class="fcopyright">Copyright 2017 Blue Hydrangea Residential Cleaning & Organizing. All Rights Reserved.</p>
	 <img class="jaxchamber" src="images/jaxchamberfooter.png">
	 <img class="napofoot" src="images/napofooter.png">
	</div>
</footer>

Answer 1

Add text-align: center; to .ffooter to center the logo.

About icons and copyright: First of all you need to remove fixed height from your footer and change background-size from 100% 100% to cover. Also remove float and negative margins from your icons. Also remove padding-top from .fcopyright

If you want copyright to be below icons — put it after icons in HTML markup