页脚与网站内容重叠

Posted 2023-03-21

【中文标题】页脚与网站内容重叠

【英文标题】：Footer is overlapping website content

【发布时间】：2018-10-25 10:16:26

【问题描述】：

我正在运行一个 Drupal 站点，并且当前遇到了当前页脚的问题，我试图弄清楚为什么它总是与整个站点重叠，我已经能够发现页脚的颜色是问题所在，我试过改变颜色，同样的问题发生了。我尝试在页脚之前放置一个 div 标签，在页脚之前放置一条水平线。

下面我附上了页脚是响应式网站的代码，页脚的主要目的是让它能够在移动设备和桌面设备上运行，只是无法解决最后一个问题。每个部分都包含每个功能的标题，包括

第一部分是最顶部的样式表，包含表单的高度和宽度。页脚颜色标记为 ct-footer 这仅包括每个部分的标签，例如 ct-footer background 或 ct-footer pre 用于表单和 div。

html,
body,
img,
figure 
  max-width: 100%;


html,
body 
  overflow-x: hidden;
  color: #000;
  -ms-overflow-style: scrollbar;
  -webkit-font-smoothing: antialiased;


a,
a:hover,
a:focus,
a:active 
  text-decoration: none;
  color: inherit;


a 
  -webkit-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;


.ct-u-paddingTop10 
  padding-top: 10px !important;


.ct-footer 
  background-color: #111;
  padding-top: 70px;
  margin-top: 20px;
  position: relative;


.ct-footer-pre 
  width: 100%;
  padding-bottom: 55px;
  border-bottom: 1px solid #555;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);


.ct-footer-pre span 
  font-family: 'Open Sans Condensed', sans-serif;
  color: #ebebeb;
  font-size: 30px;


.ct-footer-pre .form-group 
  position: relative;
  margin: 0;


.ct-footer-pre .form-group:before,
.ct-footer-pre .form-group:after 
  content: '';
  display: table;


.ct-footer-pre .form-group:after 
  clear: both;


.ct-footer-pre .form-group input 
  border: 1px solid #39a2bf;
  background-color: #333;
  color: #fff;
  height: 50px;
  padding: 0 30px;
  margin: 0 5px;
  border-radius: 0 !important;


.ct-footer-pre .form-group button 
  height: 50px;
  position: relative;
  width: 80px;
  padding: 0


.ct-footer-list 
  padding: 50px 0;
  list-style: none;
  padding-left: 0;
  display: table;
  width: 100%;
  border-bottom: 1px solid #555;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);


.ct-footer-list>li .ct-footer-list-header 
  font-family: 'Open Sans Condensed', sans-serif;
  color: #3a98b2;
  font-size: 30px;


.ct-footer-list>li ul 
  list-style: none;
  padding-left: 0;


.ct-footer-list>li ul li a 
  color: #fff;


.ct-footer-list>li ul li a:hover,
.ct-footer-post a:hover 
  text-decoration: underline;


.ct-footer-post 
  background: #000;
  padding: 30px 0;


.ct-footer-post .inner-left,
.ct-footer-post .inner-right 
  padding: 20px 0;


.ct-footer-post ul 
  list-style: none;
  padding-left: 0;
  margin: 0 -20px;


.ct-footer-post ul li 
  display: inline-block;
  margin: 0 20px;


.ct-footer-post a 
  color: #fff;


.ct-footer-post p 
  color: #fff;


.ct-footer-meta 
  padding-top: 30px;


.ct-footer-meta .ct-socials 
  padding: 20px 0;


.ct-footer-meta .ct-socials li 
  padding: 0 3px;


.ct-footer--with-button 
  padding-top: 150px;


address 
  color: #fff;
  display: inline-block;


address span 
  font-weight: 600;


address a 
  color: #fff;


address a:hover 
  text-decoration: underline;


.btn 
  font-family: 'Open Sans Condensed', sans-serif;
  border-radius: 0;
  border: none;
  text-transform: uppercase;
  color: #111;
  font-size: 26px;
  padding: 12px 30px;


.btn.btn-motive 
  background-color: #00bff3;
  -webkit-transition: all .25s ease;
  transition: all .25s ease;


.btn.btn-motive:hover,
.btn.btn-motive:hover:active 
  background-color: #00bff3;


.btn.btn-violet 
  color: #fff;
  background-color: #4f4f99;
  -webkit-transition: all .25s ease;
  transition: all .25s ease;


.btn.btn-violet:hover 
  background-color: #37376b;


.btn.btn-violet:hover:active 
  background-color: #2f2f5b


.btn.btn-green 
  color: #fff;
  background-color: #43670f;
  -webkit-transition: all .25s ease;
  transition: all .25s ease;


.btn.btn-green:hover 
  background-color: #36520c;


.btn.btn-green:hover:active 
  background-color: #314a0b;


.btn.btn-red 
  color: #fff;
  background-color: #da2229;
  -webkit-transition: all .25s ease;
  transition: all .25s ease;


.btn.btn-red:hover 
  background-color: #ae1b21;


.btn.btn-red:hover:active 
  background-color: #9d181e


.btn.btn-white 
  background-color: #fff;
  -webkit-transition: all .25s ease;
  transition: all .25s ease;


.btn.btn-white:hover 
  background-color: #d9d9d9;


.btn.btn-white:hover:active 
  background-color: #c9c9c9


.btn.btn-large 
  padding: 20px 50px;
  font-size: 30px;
  white-space: normal;


.ct-mediaSection 
  background-attachment: fixed;


.ct-section_header--type1 
  font-family: 'Open Sans Condensed', sans-serif;
  color: #000;
  font-size: 115px;
  text-transform: uppercase;


.ct-section_header--type2 small 
  font-family: 'coquette', fantasy;
  font-size: 58px;
  line-height: .7;
  display: block;
  font-weight: 700;
  position: relative;
  left: -12px;


.ct-section_header--type2 span 
  font-family: 'Bebas Neue';
  font-size: 115px;
  line-height: .8;


.ct-section_header--type2 img 
  display: inline-block;
  float: left;
  position: relative;
  top: 15px;
  padding-right: 3px;


.ct-section_header--type3 
  text-align: center;


.ct-section_header--type3 small 
  font-family: 'coquette', fantasy;
  font-size: 50px;
  padding: 15px 0;
  font-weight: 700;
  color: #fff;
  background-image: url("/core/fileparse.php/16/urlt/../images/ribbon.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: block


.ct-section_header--type3 span 
  font-family: 'Bebas Neue';
  font-size: 150px;
  font-weight: 400;
  text-transform: uppercase;
  line-height: .85


.ct-section_header--type4 
  text-align: center;


.ct-section_header--type4:before,
.ct-section_header--type4:after 
  content: '';
  display: table


.ct-section_header--type4:after 
  clear: both


.ct-section_header--type4 small 
  font-family: 'coquette', fantasy;
  font-size: 50px;
  color: inherit;
  font-weight: 700;
  display: block


.ct-section_header--type4 span 
  font-family: 'nimbus-sans-condensed', sans-serif;
  font-weight: 400;
  font-weight: bold;
  font-size: 150px;
  text-transform: uppercase;
  display: block;
  line-height: .7


.ct-section_header+p 
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -1.5px;
  text-align: center;


.ct-section_header--type4+p 
  font-family: 'nimbus-sans-condensed', sans-serif;
  font-weight: 400;
  font-size: 40px;
  font-weight: 700;
  line-height: 1;



/* Media Queries */

@media (min-width:1200px) 
  .ct-footer-pre 
    display: table;
  
  .ct-footer-pre>.inner 
    display: table-cell;
    vertical-align: middle;
  
  .ct-footer-list>li 
    width: 20%;
    display: table-cell;
    vertical-align: top;
  
  .ct-footer-list>li:last-child 
    width: 7%;
  


@media (max-width:1199px) 
  .ct-footer-pre .form-group 
    padding-top: 15px
  


@media (max-width: 1199px) 
  .ct-footer-list>li 
    display: inline-block;
    float: left;
  


@media (min-width:992px) 
  .ct-footer-post .inner-left 
    float: left;
  
  .ct-footer-post .inner-right 
    float: right;
  


@media (max-width:991px) 
  .ct-footer-post 
    text-align: center;
  


@media (min-width: 768px) and (max-width: 1199px) 
  .ct-footer-list>li 
    width: 33.3333%;
  


@media (min-width:768px) 
  .ct-footer-post p 
    display: inline-block;
  
  .ct-footer-post p+p 
    padding-left: 50px;
  


@media (max-width:767px) 
  address 
    padding-top: 30px;
  


@media (min-width: 480px) and (max-width:767px) 
  .ct-footer-list>li 
    width: 50%;
  


@media (min-width:480px) 
  .ct-footer-pre .form-group button 
    top: -1px;
  
  .ct-footer-pre .form-group input 
    width: 331px;
  


@media (max-width:479px) 
  .ct-footer-pre .form-group input 
    float: left;
    width: 70%;
    margin: 0;
  
  .ct-footer-pre .form-group button 
    float: left;
    width: 30%;
  
  .ct-footer-list>li 
    width: 100%;
    text-align: center;
  
  .ct-footer-list 
    padding: 20px 0;
  
  .btn.btn-large 
    padding: 20px 10px;
    line-height: .9;
    font-size: 26px;
    letter-spacing: -.2px;
  
  .ct-section_header--type1 
    font-size: 60px;
    line-height: .8;
  
  .ct-section_header+p 
    font-size: 22px;
  
  .ct-section_header--type3 small 
    font-size: 25px;
  
  .ct-section_header--type4 small 
    font-size: 40px;
  
  .ct-section_header--type3 span 
    font-size: 90px;
  
  .ct-section_header--type4 span 
    font-size: 80px;
  
  .ct-section_header--type4+p 
    font-size: 28px;
  

<footer class="ct-footer">
  <div class="container">
    <form action="" enctype="multipart/form-data" method="post" name="contentForm">&nbsp;</form>

    <ul class="ct-footer-list text-center-sm">
      <li>
        <h2 class="ct-footer-list-header">Contract Vehicles</h2>

        <ul>
          <li><a href="">Company</a></li>
          <li><a href="">Clients</a></li>
          <li><a href="">News</a></li>
          <li><a href="">Careers</a></li>
        </ul>
      </li>
      <li>
        <h2 class="ct-footer-list-header">Services</h2>

        <ul>
          <li><a href="">Design</a></li>
          <li><a href="">Marketing</a></li>
          <li><a href="">Sales</a></li>
          <li><a href="">Programming</a></li>
          <li><a href="">Support</a></li>
        </ul>
      </li>
      <li>
        <h2 class="ct-footer-list-header">About us</h2>

        <ul>
          <li><a href="">Thought Leadership</a></li>
          <li><a href="">Webinars</a></li>
          <li><a href="">Events</a></li>
          <li><a href="">Sponsorships</a></li>
          <li><a href="">Advisors</a></li>
          <li><a href="">Training Program</a></li>
          <li><a href="">Activities &amp; Campaigns</a></li>
        </ul>
      </li>
      <li>
        <h2 class="ct-footer-list-header">Resources&nbsp;</h2>

        <ul>
          <li><a href="">WebCorpCo Blog</a></li>
          <li><a href="">Hackathons</a></li>
          <li><a href="">Videos</a></li>
          <li><a href="">News Releases</a></li>
          <li><a href="">Newsletters</a>
            <ul>
              <li><a href="">FAQ</a></li>
              <li><a href="">Our Board</a></li>
              <li><a href="">Our Staff</a></li>
              <li><a href="">Contact Us</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>

    <div class="ct-footer-meta text-center-sm">
      <div class="row">
        <div class="col-sm-6 col-md-2"><img  src="https://www.solodev.com/assets/footer/logo.png" /></div>

        <div class="col-sm-6 col-md-3">
          <address><span>WebCorpCo</span><br />
123 Easy Street<br />
Orlando, Florida, 32801<br />
<span>Phone: <a href="tel:[phone]">[phone]</a></span></address>
        </div>

        <div class="col-sm-6 col-md-2 ct-u-paddingTop10">
          <a href="" target="_blank"><img  src="https://www.solodev.com/assets/footer/appstore.png" /></a>
        </div>

        <div class="col-sm-6 col-md-2 ct-u-paddingTop10">
          <a href="" target="_blank"><img  src="https://www.solodev.com/assets/footer/androidstore.png" /></a>
        </div>

        <div class="col-sm-6 col-md-3">
          <ul class="ct-socials list-unstyled list-inline">
            <li>
              <a href="" target="_blank"><img  src="https://www.solodev.com/assets/footer/facebook-white.png" /></a>
            </li>
            <li>
              <a href="" target="_blank"><img  src="https://www.solodev.com/assets/footer/twitter-white.png" /></a>
            </li>
            <li>
              <a href="" target="_blank"><img  src="https://www.solodev.com/assets/footer/youtube-white.png" /></a>
            </li>
            <li>
              <a href="" target="_blank"><img  src="https://www.solodev.com/assets/footer/instagram-white.png" /></a>
            </li>
            <li>
              <a href="" target="_blank"><img  src="https://www.solodev.com/assets/footer/pinterest-white.png" /></a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <div class="ct-footer-post">
    <div class="container">
      <div class="inner-left">
        <ul>
          <li><a href="">FAQ</a></li>
          <li><a href="">News</a></li>
          <li><a href="">Contact Us</a></li>
        </ul>
      </div>

      <div class="inner-right">
        <p>Copyright © 2016 WebCorpCo.&nbsp;<a href="">Privacy Policy</a></p>

        <p><a class="ct-u-motive-color" href="" target="_blank">Web Design</a> by DigitalUs on <a href="" target="_blank">Solodev CMS</a></p>
      </div>
    </div>
  </div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

【问题讨论】：

我已经很好地检查了你的代码，没有任何重叠的东西我只是复制了你的页脚上方的整个容器，一切看起来都很好，你能说一下你面临什么，因为它不清楚你的代码很好

好吧，当我将代码应用到作为页脚块的块时，目前没有问题，它会使整个网站变黑。我在页脚块正上方也有一个站点地图块，但我认为这不是问题。我尝试了另一个页脚，它解决了问题，但它不是响应式页脚，并且在我检查移动版本时面临失真。我将附上非响应式页脚的代码。

当我测试它时它完全响应并且它很好也许你可以将你的代码上传到 github 页面或 jsfiddle 你可以尝试提供完整的代码也许有一些你没有的东西在这个sn-p 你在你的帖子里有它

好的，问题是我的旧页脚工作正常，没有这个重叠的问题，只是不适合移动设备。这是旧页脚的链接。 github.com/userinz/drupalsite/commit/…。这很奇怪，因为我认为新的是我的错。我会再发一次新的，看看是不是我错过了。

好吧，这是新页脚，这是旧页脚的响应式页脚。我已经检查了这个，但在 Drupal 网站上仍然存在重叠问题。 gist.github.com/userinz/0e5bcf834d02b4a2bb3df614531a9b5c

【参考方案1】：

我所做的使页脚保持在原位而不与内容重叠的过程是放置一个并且我什至添加了一个

---

在代码开头仔细检查问题。页脚保持原位，不再与网站内容重叠。它也是一个非常敏感的页脚加上改进。

<style type="text/css">html,
body,
img,
figure 
  max-width: 100%;

html,
body 
  overflow-x: hidden;
  color: #000;
  -ms-overflow-style: scrollbar;
  -webkit-font-smoothing: antialiased;

a,
a:hover,
a:focus,
a:active 
  text-decoration: none;
  color: inherit;

a 
  -webkit-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;

.ct-u-paddingTop10 
  padding-top: 10px !important;

.ct-footer 
  background-color: #111;
  padding-top: 70px;
  margin-top: 20px;
  position: relative;

.ct-footer-pre 
  width: 100%;
  padding-bottom: 55px;
  border-bottom: 1px solid #555;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

.ct-footer-pre span 
  font-family: 'Open Sans Condensed', sans-serif;
  color: #ebebeb;
  font-size: 30px;

.ct-footer-pre .form-group 
  position: relative;
  margin: 0;

.ct-footer-pre .form-group:before,
.ct-footer-pre .form-group:after 
  content: '';
  display: table;

.ct-footer-pre .form-group:after 
  clear: both;

.ct-footer-pre .form-group input 
  border: 1px solid #39a2bf;
  background-color: #333;
  color: #fff;
  height: 50px;
  padding: 0 30px;
  margin: 0 5px;
  border-radius: 0 !important;

.ct-footer-pre .form-group button 
  height: 50px;
  position: relative;
  width: 80px;
  padding: 0

.ct-footer-list 
  padding: 50px 0;
  list-style: none;
  padding-left: 0;
  display: table;
  width: 100%;
  border-bottom: 1px solid #555;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

.ct-footer-list > li .ct-footer-list-header 
  font-family: 'Open Sans Condensed', sans-serif;
  color: #3a98b2;
  font-size: 30px;

.ct-footer-list > li ul 
  list-style: none;
  padding-left: 0;

.ct-footer-list > li ul li a 
  color: #fff;

.ct-footer-list > li ul li a:hover,
.ct-footer-post a:hover 
  text-decoration: underline;

.ct-footer-post 
  background: #000;
  padding: 30px 0;

.ct-footer-post .inner-left,
.ct-footer-post .inner-right 
  padding: 20px 0;

.ct-footer-post ul 
  list-style: none;
  padding-left: 0;
  margin: 0 -20px;

.ct-footer-post ul li 
  display: inline-block;
  margin: 0 20px;

.ct-footer-post a 
  color: #fff;

.ct-footer-post p 
  color: #fff;

.ct-footer-meta 
  padding-top: 30px;

.ct-footer-meta .ct-socials 
  padding: 20px 0;

.ct-footer-meta .ct-socials li 
  padding: 0 3px;

.ct-footer--with-button 
  padding-top: 150px;

address 
  color: #fff;
  display: inline-block;

address span 
  font-weight: 600;

address a 
  color: #fff;

address a:hover 
  text-decoration: underline;

.btn 
  font-family: 'Open Sans Condensed', sans-serif;
  border-radius: 0;
  border: none;
  text-transform: uppercase;
  color: #111;
  font-size: 26px;
  padding: 12px 30px;

.btn.btn-motive 
  background-color: #00bff3;
  -webkit-transition: all .25s ease;
  transition: all .25s ease;

.btn.btn-motive:hover,
.btn.btn-motive:hover:active 
  background-color: #00bff3;

.btn.btn-violet 
  color: #fff;
  background-color: #4f4f99;
  -webkit-transition: all .25s ease;
  transition: all .25s ease;

.btn.btn-violet:hover 
  background-color: #37376b;

.btn.btn-violet:hover:active 
  background-color: #2f2f5b

.btn.btn-green 
  color: #fff;
  background-color: #43670f;
  -webkit-transition: all .25s ease;
  transition: all .25s ease;

.btn.btn-green:hover 
  background-color: #36520c;

.btn.btn-green:hover:active 
  background-color: #314a0b;

.btn.btn-red 
  color: #fff;
  background-color: #da2229;
  -webkit-transition: all .25s ease;
  transition: all .25s ease;

.btn.btn-red:hover 
  background-color: #ae1b21;

.btn.btn-red:hover:active 
  background-color: #9d181e

.btn.btn-white 
  background-color: #fff;
  -webkit-transition: all .25s ease;
  transition: all .25s ease;

.btn.btn-white:hover 
  background-color: #d9d9d9;

.btn.btn-white:hover:active 
  background-color: #c9c9c9


.btn.btn-large 
  padding: 20px 50px;
  font-size: 30px;
  white-space: normal;

.ct-mediaSection 
  background-attachment: fixed;

.ct-section_header--type1 
  font-family: 'Open Sans Condensed', sans-serif;
  color: #000;
  font-size: 115px;
  text-transform: uppercase;

.ct-section_header--type2 small 
  font-family: 'coquette', fantasy;
  font-size: 58px;
  line-height: .7;
  display: block;
  font-weight: 700;
  position: relative;
  left: -12px;

.ct-section_header--type2 span 
  font-family: 'Bebas Neue';
  font-size: 115px;
  line-height: .8;

.ct-section_header--type2 img 
  display: inline-block;
  float: left;
  position: relative;
  top: 15px;
  padding-right: 3px;

.ct-section_header--type3 
  text-align: center;

.ct-section_header--type3 small 
  font-family: 'coquette', fantasy;
  font-size: 50px;
  padding: 15px 0;
  font-weight: 700;
  color: #fff;
  background-image: url("/core/fileparse.php/16/urlt/../images/ribbon.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  display: block

.ct-section_header--type3 span 
  font-family: 'Bebas Neue';
  font-size: 150px;
  font-weight: 400;
  text-transform: uppercase;
  line-height: .85

.ct-section_header--type4 
  text-align: center;

.ct-section_header--type4:before,
.ct-section_header--type4:after 
  content: '';
  display: table

.ct-section_header--type4:after 
  clear: both

.ct-section_header--type4 small 
  font-family: 'coquette', fantasy;
  font-size: 50px;
  color: inherit;
  font-weight: 700;
  display: block

.ct-section_header--type4 span 
  font-family: 'nimbus-sans-condensed', sans-serif;
  font-weight: 400;
  font-weight: bold;
  font-size: 150px;
  text-transform: uppercase;
  display: block;
  line-height: .7

.ct-section_header + p 
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -1.5px;
  text-align: center;

.ct-section_header--type4 + p 
  font-family: 'nimbus-sans-condensed', sans-serif;
  font-weight: 400;
  font-size: 40px;
  font-weight: 700;
  line-height: 1;


/* Media Queries */

@media (min-width:1200px) 
  .ct-footer-pre 
    display: table;
  
  .ct-footer-pre > .inner 
    display: table-cell;
    vertical-align: middle;
  
  .ct-footer-list > li 
    width: 20%;
    display: table-cell;
    vertical-align: top;
  
  .ct-footer-list > li:last-child 
    width: 7%;
  


@media (max-width:1199px) 
  .ct-footer-pre .form-group 
      padding-top: 15px
  

@media (max-width: 1199px) 
  .ct-footer-list > li 
    display: inline-block;
    float: left;
  

@media (min-width:992px) 
  .ct-footer-post .inner-left 
    float: left;
  
  .ct-footer-post .inner-right 
    float: right;
  

@media (max-width:991px) 
  .ct-footer-post 
    text-align: center;
  

@media (min-width: 768px) and (max-width: 1199px) 
  .ct-footer-list > li 
    width: 33.3333%;
  

@media (min-width:768px) 
  .ct-footer-post p 
    display: inline-block;
  
  .ct-footer-post p + p 
    padding-left: 50px;
  

@media (max-width:767px) 
  address 
    padding-top: 30px;
  

@media (min-width: 480px) and (max-width:767px) 
  .ct-footer-list > li 
    width: 50%;
  

@media (min-width:480px) 
  .ct-footer-pre .form-group button 
    top: -1px;
  
  .ct-footer-pre .form-group input 
    width: 331px;
  

@media (max-width:479px) 
  .ct-footer-pre .form-group input 
    float: left;
    width: 70%;
    margin: 0;
  
  .ct-footer-pre .form-group button 
    float: left;
    width: 30%;
  
  .ct-footer-list > li 
    width: 100%;
    text-align: center;
  
  .ct-footer-list 
    padding: 20px 0;
  
  .btn.btn-large 
    padding: 20px 10px;
    line-height: .9;
    font-size: 26px;
    letter-spacing: -.2px;
  
  .ct-section_header--type1 
    font-size: 60px;
    line-height: .8;
  
  .ct-section_header + p 
    font-size: 22px;
  
  .ct-section_header--type3 small 
    font-size: 25px;
  
  .ct-section_header--type4 small 
      font-size: 40px;
  
  .ct-section_header--type3 span 
    font-size: 90px;
  
  .ct-section_header--type4 span 
      font-size: 80px;
  
  .ct-section_header--type4 + p 
    font-size: 28px;
  

</style>
<div class="container">&nbsp;</div>

<footer class="ct-footer">
<div class="container">
<form action="" enctype="multipart/form-data" method="post" name="contentForm">&nbsp;</form>

<ul class="ct-footer-list text-center-sm">
    <li>
    <h2 class="ct-footer-list-header">Contract Vechciles</h2>

    <ul>
        <li><a href="">Company</a></li>
        <li><a href="">Clients</a></li>
        <li><a href="">News</a></li>
        <li><a href="">Careers</a></li>
    </ul>
    </li>
    <li>
    <h2 class="ct-footer-list-header">Services</h2>

    <ul>
        <li><a href="">Design</a></li>
        <li><a href="">Marketing</a></li>
        <li><a href="">Sales</a></li>
        <li><a href="">Programming</a></li>
        <li><a href="">Support</a></li>
    </ul>
    </li>
    <li>
    <h2 class="ct-footer-list-header">About us</h2>

    <ul>
        <li><a href="">Thought Leadership</a></li>
        <li><a href="">Webinars</a></li>
        <li><a href="">Events</a></li>
        <li><a href="">Sponsorships</a></li>
        <li><a href="">Advisors</a></li>
        <li><a href="">Training Program</a></li>
        <li><a href="">Activities &amp; Campaigns</a></li>
    </ul>
    </li>
    <li>
    <h2 class="ct-footer-list-header">Resources&nbsp;</h2>

    <ul>
        <li><a href="">WebCorpCo Blog</a></li>
        <li><a href="">Hackathons</a></li>
        <li><a href="">Videos</a></li>
        <li><a href="">News Releases</a></li>
        <li><a href="">Newsletters</a>
        <ul>
            <li><a href="">FAQ</a></li>
            <li><a href="">Our Board</a></li>
            <li><a href="">Our Staff</a></li>
            <li><a href="">Contact Us</a></li>
        </ul>
        </li>
    </ul>
    </li>
</ul>

<div class="ct-footer-meta text-center-sm">
<div class="row">
<div class="col-sm-6 col-md-2"><img  src="https://www.solodev.com/assets/footer/logo.png" /></div>

<div class="col-sm-6 col-md-3">
<address><span>WebCorpCo</span><br />
123 Easy Street<br />
Orlando, Florida, 32801<br />
<span>Phone: <a href="tel:[phone]">[phone]</a></span></address>
</div>

<div class="col-sm-6 col-md-2 ct-u-paddingTop10">&nbsp;<a href="" target="_blank">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</a></div>

<div class="col-sm-6 col-md-3">
<p><a href="" target="_blank"><img  src="https://www.solodev.com/assets/footer/facebook-white.png" /></a><a href="" target="_blank"><img  src="https://www.solodev.com/assets/footer/twitter-white.png" /></a><a href="" target="_blank"><img  src="https://www.solodev.com/assets/footer/youtube-white.png" /></a><a href="" target="_blank"><img  src="https://www.solodev.com/assets/footer/instagram-white.png" /></a><a href="" target="_blank"><img  src="https://www.solodev.com/assets/footer/pinterest-white.png" /></a></p>
</div>
</div>
</div>
</div>

<div class="ct-footer-post">
<div class="container">
<div class="inner-left">
<ul>
    <li><a href="">FAQ</a></li>
    <li><a href="">News</a></li>
    <li><a href="">Contact Us</a></li>
</ul>
</div>

<div class="inner-right">
<p>Copyright © 2016 WebCorpCo.&nbsp;<a href="">Privacy Policy</a></p>

<p><a class="ct-u-motive-color" href="" target="_blank">Web Design</a> by DigitalUs on <a href="" target="_blank">Solodev CMS</a></p>
</div>
</div>
</div>
</footer>