Wie kann ich die Länge und Position der Fußzeile konfigurieren?

Question

Wie kann ich Footer Länge und Position für jedes Gerät anpassen?

Das ist das Problem, das sich mir stellt, vor allem, wenn ich es von einem Mobiltelefon aus:

Der Code der Fußzeile ist:

<?php 
echo ' 


    <!--footer start--> 
    <footer class="footer-small"> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-lg-6 col-sm-6 pull-right"> 
        <ul class="social-link-footer list-unstyled"> 

         <li class="wow flipInX" data-wow-duration="2s" data-wow-delay=".1s"><a href="https://www.facebook.com/giulio.greco.77?fref=ts" target="_blank"><i class="fa fa-facebook"></i></a></li> 

         <li class="wow flipInX" data-wow-duration="2s" data-wow-delay=".5s"><a href="https://twitter.com/giuliogrecoact" target="_blank"><i class="fa fa-twitter"></i></a></li> 
         <li class="wow flipInX" data-wow-duration="2s" data-wow-delay=".6s"><a href="https://www.instagram.com/giuliogrecoactor/" target="_blank"><i class="fa fa-instagram"></i></a></li> 

        </ul> 
       </div> 
       <div class="col-md-4"> 
       <font color="white"><br>&copy; 2016 Giulio Greco<br><a href="privacy.php" target="_blank" hover="#5b5c5c"><b>Informativa sulla privacy</b></a><br><br> 
       </font> 
       </div> 
      </div> 
     </div> 
    </footer> 

    <script src="/cookiechoices.js"></script> 
<script>//<![CDATA[ 
document.addEventListener("DOMContentLoaded", function(event) { 
    cookieChoices.showCookieConsentBar("Questo sito utilizza i cookie tecnici e di terze parti, se continui la navigazione accetti il loro uso.", 
     "Chiudi", "Maggiori Informazioni", 
       "privacy.php"); 
    }); 
//]]></script> 
'; 
    ?> 

Und der Stil der Fußzeile ist:

.footer { 
    background: #34495e; 
    color: #fff; 
    padding: 50px 0; 
    display: inline-block; 
    width: 100%; 
    font-weight: 300; 
} 
.footer h1 { 
    font-size: 20px; 
    text-transform: uppercase; 
    font-weight: 400; 
    margin-top: 0; 
    margin-bottom: 20px; 
} 
.footer address a { color: #48cfad } 
.tweet-box { 
    background: #505b71; 
    padding: 8px 15px; 
    border-radius: 1px; 
    -moz-border-radius: 1px; 
    -webkit-border-radius: 1px; 
    border-bottom: 1px solid #636F79; 
    font-size: 14px; 
} 
.tweet-box:before { 
    background-color: #505b71; 
    border-color: #505b71; 
    border-image: none; 
    border-right: 1px none #505b71; 
    border-style: none; 
    content: ""; 
    display: block; 
    height: 22px; 
    left: 60px; 
    position: absolute; 
    top: 32px; 
    transform: rotate(45deg); 
    -webkit-transform: rotate(45deg); 
    width: 22px; 
} 
.tweet-box a, 
.tweet-box i { color: #00adef } 
.tweet-box a:hover { color: #428bca } 
.tweet-box i { 
    font-size: 40px; 
    float: left; 
    margin-right: 15px; 
} 
.social-link-footer li { 
    float: right; 
    margin: 20px 10px 5px 0px; 
    padding-bottom: 5px; 
} 
.social-link-footer li a { 
    color: #333; 
    background: #FFFFFF; 
    padding: 10px; 
    width: 50px; 
    height: 50px; 
    border-radius: 50px; 
    -moz-border-radius: 50px; 
    -webkit-border-radius: 50px; 
    float: left; 
    text-align: center; 
    font-size: 20px; 
    -webkit-transition: all .3s ease; 
    -moz-transition: all .3s ease; 
    -ms-transition: all .3s ease; 
    -o-transition: all .3s ease; 
    transition: all .3s ease; 
} 
.social-link-footer li a:hover { 
    background: #c7c7c7; 
    -webkit-transition: all .3s ease; 
    -moz-transition: all .3s ease; 
    -ms-transition: all .3s ease; 
    -o-transition: all .3s ease; 
    transition: all .3s ease; 
} 
.copyright { 
    color: #fff; 
    padding-top: 15px; 
} 
.page-footer { padding: 0% 13% } 
.page-footer h1 { padding-left: 4% } 
ul.page-footer-list { 
    list-style: none; 
    padding: 0px 10px; 
} 
ul.page-footer-list li { 
    line-height: 35px; 
    border-bottom: 1px dashed #636F79; 
} 
ul.page-footer-list a { color: #fff } 
ul.page-footer-list li i { padding-right: 10px } 
.footer-small { 
    background-color: #333; 
    margin-top: -6px; 
    padding-top: 5px; 
} 
.text-footer { 
    padding-left: 10px; 
    margin-left: 10px; 
} 
.text-footer p { text-align: left } 
.address p { 
    text-align: left; 
    margin-bottom: 10px; 
} 

Answer 1

Die Fußzeile css Stil enthält oft eine Breite von 100% und Position am unteren Rand einer Seite. Wenn Sie ein Verhalten verschiedener CSS-Stil, wenn die Gerätegröße ändert, können Sie die Medien-Anfragen wie in diesem Beispiel verwenden können:

* { 
 
    box-sizing: border-box; 
 
} 
 
.row:after { 
 
    content: ""; 
 
    clear: both; 
 
    display: block; 
 
} 
 
[class*="col-"] { 
 
    float: left; 
 
    padding: 15px; 
 
} 
 
html { 
 
    font-family: "Lucida Sans", sans-serif; 
 
} 
 
.header { 
 
    background-color: #9933cc; 
 
    color: #ffffff; 
 
    padding: 15px; 
 
} 
 
.menu ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.menu li { 
 
    padding: 8px; 
 
    margin-bottom: 7px; 
 
    background-color :#33b5e5; 
 
    color: #ffffff; 
 
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); 
 
} 
 
.menu li:hover { 
 
    background-color: #0099cc; 
 
} 
 
.aside { 
 
    background-color: #33b5e5; 
 
    padding: 15px; 
 
    color: #ffffff; 
 
    text-align: center; 
 
    font-size: 14px; 
 
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); 
 
} 
 
.footer { 
 
    background-color: #0099cc; 
 
    color: #ffffff; 
 
    text-align: center; 
 
    font-size: 12px; 
 
    padding: 15px; 
 
} 
 
/* For mobile phones: */ 
 
[class*="col-"] { 
 
    width: 100%; 
 
} 
 
@media only screen and (min-width: 600px) { 
 
    /* For tablets: */ 
 
    .col-m-1 {width: 8.33%;} 
 
    .col-m-2 {width: 16.66%;} 
 
    .col-m-3 {width: 25%;} 
 
    .col-m-4 {width: 33.33%;} 
 
    .col-m-5 {width: 41.66%;} 
 
    .col-m-6 {width: 50%;} 
 
    .col-m-7 {width: 58.33%;} 
 
    .col-m-8 {width: 66.66%;} 
 
    .col-m-9 {width: 75%;} 
 
    .col-m-10 {width: 83.33%;} 
 
    .col-m-11 {width: 91.66%;} 
 
    .col-m-12 {width: 100%;} 
 
} 
 
@media only screen and (min-width: 768px) { 
 
    /* For desktop: */ 
 
    .col-1 {width: 8.33%;} 
 
    .col-2 {width: 16.66%;} 
 
    .col-3 {width: 25%;} 
 
    .col-4 {width: 33.33%;} 
 
    .col-5 {width: 41.66%;} 
 
    .col-6 {width: 50%;} 
 
    .col-7 {width: 58.33%;} 
 
    .col-8 {width: 66.66%;} 
 
    .col-9 {width: 75%;} 
 
    .col-10 {width: 83.33%;} 
 
    .col-11 {width: 91.66%;} 
 
    .col-12 {width: 100%;} 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
</head> 
 
<body> 
 

 
<div class="header"> 
 
<h1>Chania</h1> 
 
</div> 
 

 
<div class="row"> 
 
<div class="col-3 col-m-3 menu"> 
 
<ul> 
 
<li>The Flight</li> 
 
<li>The City</li> 
 
<li>The Island</li> 
 
<li>The Food</li> 
 
</ul> 
 
</div> 
 

 
<div class="col-6 col-m-9"> 
 
<h1>The City</h1> 
 
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p> 
 
</div> 
 

 
<div class="col-3 col-m-12"> 
 
<div class="aside"> 
 
<h2>What?</h2> 
 
<p>Chania is a city on the island of Crete.</p> 
 
<h2>Where?</h2> 
 
<p>Crete is a Greek island in the Mediterranean Sea.</p> 
 
<h2>How?</h2> 
 
<p>You can reach Chania airport from all over Europe.</p> 
 
</div> 
 
</div> 
 

 
</div> 
 

 
<div class="footer"> 
 
<p>Resize the browser window to see how the content respond to the resizing.</p> 
 
</div> 
 

 
</body> 
 
</html>

Einige verwandte Beispiele: Responsive Web Design - Media Queries