Question

我的网站已准备就绪，但有一个问题阻碍了我。每当我在移动设备上查看我的网站时，例如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;
}
}

移动网格布局问题

1 个答案: