電話右側的空白處

我對監視器屏幕和手機之間的寬度有疑問。但是，它在個人電腦上運行良好，但由於右側有空白空間，因此無法在手機上工作。以下代碼如下。電話右側的空白處

HTML

<div id="home-about"> 
    <div class="middle-align"> 
     <h1> ABOUT ME </h1> 
     <p> TESTING TESTING TESTING TESTING TESTING </p> 
    </div> 
</div>

CSS

#home-about { 
    margin:0 auto; 
    clear:both; 
    height:880px; 
    padding:150px 50px 50px 50px; 
    background-color:#d24d57; 
    text-align:left; 
    line-height:25px; 
} 

.middle-align { 
    width:1200px; 
    margin:0 auto; 
}

首先的#home-about顏色#d24d57。顏色完全顯示在監視器屏幕上，但不在手機上。

這是JSFIDDLE。正如你所看到的JSFIDDLE，試着向右滾動，沒有顏色，只有白色。如何填寫#d23d57。任何想法？

來源

2014-09-06 Anthosiast

請參閱此鏈接，響應式設計 Responsive layout tutorial? 或者您可以使用引導程序的響應HTML開發Get-Bootstrap。希望這有助於

這些建議應該是一個評論，但不能這樣做的原因沒有得到這些的privilages

來源

2014-09-06 10:54:07 Rohit

我知道bootstrap。我只是樂於自己設計。謝謝btw。 – Anthosiast 2014-09-06 11:30:16

移動width: 1200px您#home-about：

#home-about { 
    margin:0 auto; 
    clear:both; 
    padding:150px 50px 50px 50px; 
    background-color:#d24d57; 
    text-align:left; 
    line-height:25px; 
    width: 1200px; 
}

jsFiddle Demo。

來源

2014-09-06 04:43:04 dashtinejad

您好，我才意識到它的工作對電腦，但不工作的手機。但是，您可以在手機上查看該網站嗎？它是www.anthonywebdeveloper.com。 – Anthosiast 2014-09-06 04:52:55

你應該讓它響應，第一步是從你的樣式表中刪除所有'width：1200px'和'min-width：1200px'。 – dashtinejad 2014-09-06 04:59:47

我已經完成了第一步。接下來我應該做什麼？但是，我遇到了頁腳問題。它再次顯示右側的空白區域。 @Rox – Anthosiast 2014-09-06 05:10:07

電話右側的空白處

回答

相關問題