css - 让我的盒子在 css 中响应

Question

我的 html 文件上有 8 个框，在桌面上查看时，一切看起来都正常，在移动设备上访问时，列与应有的距离很远，它应该在中心，而不是在右侧，我该怎么做才能使其响应？ Preview

我的列代码。

.articles {
    margin: 100px;
    background-color: #F5F5F5;
    }

 .article {
    margin: 5px;
    display: inline-block;
    width: 340px;
    position: relative;
    float:left;
    left: 155px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.12);
  }

  .article-image {
    width: 100%;
  }
  .article-text-wrapper {
    padding: 20px;
  }

  .article-title {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 700;
  }
 .article-description {
    font-family: 'Roboto', sans-serif;
    line-height: 16px; 
    font-size: 16px;
    color: rgba(0,0,0,0.7);
    font-weight: 300;
  }

  .article-time {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    color: rgba(0,0,0,0.4);
    font-weight: 300;
  }

非常感谢。

Answer 1

您已将 left 和 margin 属性应用于您的 article 元素。您需要为以下内容添加一个 media 查询:

@media only screen and (max-width:700px) {
   .articles {
    margin: 50px 0;
   }
   .article {
    left: 0;
    width:100%;
   }
}