元素未使用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;
    }
  }

有很多话要说，但这有望解决，如果您还有其他问题，我会回答。

• 基隆