无法为移动视图设置正确的视图标题

Question

我们已经为台式机和大型手机设置了产品外观。 但是我们无法以任何方式为较小的手机正确设置它。

照片和代码下方

/* Products list - view list */
.products-list .item .item-inner .box-info-list {
margin-left: 150px;
padding: 2px;
}
.products-list .item .item-inner {
    -moz-box-shadow: 3px 3px 5px 6px #ccc;
    -webkit-box-shadow: 3px 3px 5px 6px #ccc;
    box-shadow: 1px 1px 2px 1px #ccc;
    margin-bottom: 15px;
}
.products-list .item .item-inner:hover {
    -moz-box-shadow: 3px 3px 5px 6px #ccc;
    -webkit-box-shadow: 3px 3px 5px 6px #ccc;
    box-shadow: 2px 2px 3px 2px #ccc;
}

.products-list .item .item-inner .box-image-list {
width: 140px;
border: 0px solid #ddd;
}
@media (min-width: 320px) and (max-width: 767px) {
.products-list .item .item-inner .box-info-list .product-name {
    font-weight: 700;
    font-size: 90.33%;
    text-transform: capitalize;
    margin-bottom: 0px;
}
.products-list .item .item-inner .box-image-list {
width: 30%;
border: 0px solid #ddd;
}
.products-list .item .item-inner .box-info-list {
margin-left: 140px;
padding: 2px;
}
}

正确：

正确：

正确：

问题屏幕：

Answer 1

@Sylvester

我看到在父​​元素上使用了显示表，在子元素之一上使用了左边距。 我个人会使用其他东西，例如display flex。 但是，如果您在子元素上应用display table-cell且没有宽度（在默认级别/最小视口上），它将解决很多问题：）。

Answer 2

我个人更喜欢将flexbox与CSS3一起使用，以进行响应式网页设计。您可以尝试这样的事情：

@media (max-width: 767px) {
  .products-list .item .item-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .products-list .item .item-inner .box-image-list {
    flex-basis: 30%;
  }

  .products-list .item .item-inner .box-info-list {
    flex-basis: 65%;
    margin-left: 0;
  }
}