フッターは、モバイルデバイス上で適切に

Question

ウェブサイトが表示されていません。

ifnrussiacisforum.ruこれは、PC上の100％の幅であるが、携帯電話にいくつかの空のスペースがあります、このlikt：

コードは次のとおりです。

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

使用このCSSコード

CSS：

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

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

Answer 2

は、このコードで問題を解決：

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

Answer 3

織り：デフォルトではhttp://kodeweave.sourceforge.net/editor/#58fb912e2d456f902a77b8ebc76aa515

bodyタグmargin。あなたのCSSにNormalizeを組み込むか、あなたの体からmarginを取り除くことで修正できます。

EDIT：あなたの幅はとてもグロテスクだったなぜあなたはあなたのコンテナのほとんどに800pxと1003pxを定義されていません不思議。プラスあなたのCSSかなりかなりWET！

を変更し、次のクラスwidth100%

• に.footer .container
• .main
• .header

次に/分幅を置き換える800px & &から自分の幅を変更します次のクラスについては1003px〜80%です。 .extra-バリー

.request-形

.link

.plashka

• .bally
• また.Macの

より多くのあなたのコードを作ることに焦点を当てます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>