html - 手机上的网格布局问题

Question

我的网站已准备好上线，但有 1 个问题阻碍了我。每当我在移动设备(例如 iPhone 6 Plus)上查看我的网站时，3x1 网格布局仅显示 1 列而不是 3 列。我无法找出原因:(

HTML:

<div class="project-showcase">
        <div class="container">
            <h2>Latest Work, Projects <br> & ideas</h2>
            <hr>
            <div class="grid">
                <div class="col-3"><img src="http://placehold.it/300x180">
                    <h3>Title of project</h3>
                    <p>Lorem ispum uion et lism un lium isum ispum uion et lism ispum uion et lism .</p>
                </div>
                <div class="col-3"><img src="http://placehold.it/300x180">
                    <h3>Title of project</h3>
                    <p>Lorem ispum uion et lism un lium isum ispum uion et lism ispum uion et lism .</p>
                </div>
                <div class="col-3"><img src="http://placehold.it/300x180">
                    <h3>Title of project</h3>
                    <p>Lorem ispum uion et lism un lium isum ispum uion et lism ispum uion et lism .</p>
                </div>
            </div>
        </div>
    </div>

CSS:

.project-showcase h2 {
  color: #222;
  font-size: 40px; }
.project-showcase hr {
  margin: 8vh 0 8vh 0;
  border: 0;
  border-bottom: 4px solid #222;
  max-width: 5rem; }

.grid {
  display: flex;
  flex-direction: row;
  width: 100%; }

.col-3 {
  max-width: 33.33%;
  flex-basis: 33.33%;
  margin: 0 10px; }
  .col-3 img {
    width: 100%; }
  .col-3 h3 {
    font-size: 20px;
    font-weight: 700;
    margin: 5px 10px; }
  .col-3 p {
    margin: 0 10px; }

@media screen and (max-width: 48em) {
  .grid {
    display: flex;
    flex-direction: column;
    width: 100%; }

  .col-3 {
    max-width: 100%;
    flex-basis: 100%;
    height: 100%;
    text-align: center; }
    .col-3 h3 {
      margin: 25px; }
    .col-3 p {
      margin: 15px; } }

网站网址:www.jacksewell.uk

Answer 1

我在这里更新了我的代码:http://codepen.io/FluidOfInsanity/pen/RRgvRJ

我把 hr 标签(你会更想弄乱它)改成这个

project-showcase hr {
  margin: 8px 0 16px 0;
  border: 0;
  border-bottom: 4px solid #222;
  max-width: 5rem;
}

原始尺寸的边距在我的手机上弄乱了。

我将手机尺寸更新为:

@media screen and (max-width: 48em) {
.grid {
  flex-direction: column;
  min-height: 100%;
  flex: 1;
  flex-direction: column;
}
.col-3 {
  max-width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.col-3 h3 {
  margin: 15px;
  margin-bottom: 0;
}
.col-3 p {
  margin: 15px;
}
}