使我的完全静态页脚响应并为移动设备堆叠而列表项不会消失

Question

对于这种情况的任何建议将不胜感激。

目前为移动设备缩放时，徽标未居中。列表标题完美居中，但列表项消失了。此外，图标完全覆盖了版权横幅，而不是居中。

这是相关代码的 fiddle。

.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

将 text-align: center; 添加到 .ffooter 以使徽标居中。

关于图标和版权：首先，您需要从页脚中删除固定的 height，并将 background-size 从 100% 100% 更改为 cover。同时从图标中删除 float 和否定 margin。同时从 .fcopyright

中删除 padding-top

如果您希望版权位于图标下方 — 在 HTML 标记中将其放在图标之后

使我的完全静态页脚响应并为移动设备堆叠而列表项不会消失

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

html

css

responsiveness