Footer ist nicht richtig auf mobilen Geräten

Question

Webseite anzuzeigen

Der Code ist:

HTML:

<div class="footer"> 
    <div class="container"> 
     <img src="images/logo-img.jpg" alt="beeboss" /> 
    </div> 
</div> 

CSS:

.footer { 
    height: 60px; 
    width: 100%; 
    background: #000; 
    } 

.footer .container { 
    width: 1003px; 
    margin: 0 auto; 
} 

.footer .container img { 
    margin:19px 0px 0px 20px; 
    } 

Answer 1

verwenden CSS-Code

CSS:

.footer .container { 
    width: 100%; 
    margin: 0 auto; 
} 

.footer .container img { 
    margin:19px 0px 0px 20px; 
    } 

Answer 2

das Problem mit diesem Code wurde gelöst:

html, body { 
    min-width: 1003px; 
} 

Answer 3

Weave:http://kodeweave.sourceforge.net/editor/#58fb912e2d456f902a77b8ebc76aa515

standardmäßig der Body-Tag hat eine margin. Sie können das beheben, indem Sie entweder Normalize in Ihr CSS einbauen oder das margin aus Ihrem Körper entfernen.

EDIT: Kein Wunder, warum Ihre Breite war so grotesk Sie definiert 800px und 1003px auf die meisten Ihrer Container. Plus Ihr CSS ziemlich sehr WET!

Ändern Sie die folgenden Klassen width zu 100%

• .footer .Behälter
• .main
• .header

Dann min-width/ändern Ihre Breite von 800px & & ersetzen 1003px bis 80% für die folgenden Klassen.

• .extra-bally
• .request-Form
• .link
• .plashka
• .bally
• .mac

konzentrieren sich auch Ihren Code auf machen DRY.

body { 
 
    margin: 0; 
 
} 
 

 
.footer { 
 
    height: 60px; 
 
    width: 100%; 
 
    background: #000; 
 
} 
 

 
.footer .container { 
 
    width: 100%; 
 
    margin: 0 auto; 
 
} 
 

 
.footer .container img { 
 
    margin: 19px 0 0 20px; 
 
}

<div class="footer"> 
 
    <div class="container"> 
 
    <img src="https://forums.gota.io/images/smilies/smile.png" alt="beeboss" /> 
 
    </div> 
 
</div>