元素未使用CSS網格填充手機上屏幕的整個寬度

Question

我正在嘗試模擬個人/簡歷網站的設計，在調整頁面大小之前，頁面看起來也像我的預期，但是在調整大小以移動頁面后，頁面上的某些元素並未占據屏幕的整個寬度（我在移動設備上只使用一列）。

我在台式機上有2列布局，將其更改為帶有媒體查詢的移動設備的單列布局，問題發生在媒體查詢的斷點之后。 我在受影響的所有元素中都添加了“ width = 100％”，並嘗試在chrome開發人員工具中分別打開和關閉每個樣式規則（例如邊距和填充）。 幾天后，我確定我只是想念所有的問題，或者有一個基本的誤解。
Mobie布局問題的屏幕截圖

我的HTML

<div class="wrapper">
    <div class="intro-box">
      <h1>Who am I, and where am I going?</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </div>
    <div class="bio-box">
      <div class="photo-box">
        <h2>Thanks for discovering more about me</h2>
        <img src="davidSized.jpg" alt="David's Photo">
      </div>
    </div>
    <div class="content-wrapper">
      <h1>Learn about me here...</h1>
      <div class="selector-one selector">
        <h2>My Resume</h2>
      </div>
      <div class="selector-two selector">
        <h2>About Me</h2>
      </div>
      <div class="selector-three selector">
        <h2>More stuff</h2>
      </div>
      <div class="content">
        <p class="para-one"></p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </div>
    <div class="contact-info-box">
      <h3>Reach out to me here....</h3>
      <ul class="contact-info">
        <li>david_jhall@yahoo.com</li>
        <li><a href="#">LinkedIn Profile</a></li>
        <li><a href="#">Facebook Profile</a></li>
        <li>More ways to contact me....</li>
      </ul>
    </div>
  </div>

我的中繼標記

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

媒體查詢之前的wrapper元素

wrapper{
  display: grid;
  grid-template-columns: 30% auto;
  grid-template-rows: repeat(5 , auto);
  grid-gap: 15px;
}

媒體查詢后的wrapper元素

  .wrapper{
    grid-template-columns: auto;
    justify-content: center;
  }

不會覆蓋移動設備上整個頁面的元素（在mq之前）

.intro-box{
  grid-column: 1/3;
  margin: 0px;
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1)),border-box,url("road.jpg") no-repeat center center;
  background-size: cover;
  color: lightgrey;
  min-height: 750px;
  max-width: 100%;
  padding: 0;
}
.bio-box{
  margin: 10px;
  border: 5px solid rgba(0, 0, 0, 0.25);
  text-align: center;
  border-radius: 10%;
  min-height: 500px;
}
.content-wrapper{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto 50%;
  text-align: center;
  min-height: 500px;
  grid-gap: 5px;
  max-width: 100%;
  justify-content: center;
}
.content{
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1)),border-box;
  grid-column: 1/-1;
}

mq和其中的元素

@media screen and (max-width:700px){
  .wrapper{
    grid-template-columns: auto;
    justify-content: center;
  }
  .intro-box > h1{
    font-size: 3em;
    padding: 20px;
  }
  .bio-box{
    grid-row: 3/4;
    grid-column: 1/3;
  }
  .content-wrapper{
    margin: 0 auto;
    grid-column: 1/3;
    justify-self: center;
  }
  .content{
    padding: 20px;
    margin: 0 auto;
    margin-bottom: 50px;
    width: 100%;
  }
}

Answer 1

請記住，填充是列邊框的內部，因此在這里沒有什么區別。 還請記住，類將成為您最好的朋友，只需在媒體查詢中更改單個類的一些CSS，然后將此類添加到要為移動設備更改的每個列中。 這樣，您減少了每個MQ中要填充的代碼量。

首先，作為一種快速修復（但理想情況下不是永久性的），請嘗試在MQ中添加以下CSS：

.your-div-class {
  width: 100%;
  right: 0;
}

另外，請禁用（身體的）x溢出以避免任何討厭的側滾動條！

看看是否'正確：0; 的屬性有助於將其完全移到右側。

這就是我要做的：

給每列相同的“ response-col”類或類似的東西，然后將其彈出到MQ中，並像這樣設置樣式：

@media screen and (max-width:700px){
    .responsive-col {
      margin: 0;
      right: 0;
      width: 100%;
      font-size: 22px;
      display: block;
    }
  }

有很多話要說，但這有望解決，如果您還有其他問題，我會回答。

• 基隆