Question

我正在尝试在移动设备上将我的投资组合网格显示为 2 列，但仍然适合在一个“整页行”内，例如在桌面上

@media only screen and (max-width: 479px) {
.vc_basic_grid .vc_grid.vc_row .vc_grid-item.vc_visible-item, .vc_media_grid .vc_grid.vc_row 
.vc_grid-item.vc_visible-item {
    display: inline-block!important;
    width: 50%;
}

在某些手机上，网格分为 2 列，但被挤压到屏幕的左侧 - 并且两列只使用了一半的屏幕。在其他设备上，投资组合网格块非常小，您甚至看不到特色图片。

Companies Slide - View Portfolio Grid

Answer 1

你能看看下面的代码吗？希望它对你有用。您可以使用 display: flex 属性，您只需要将 display: flex 提供给父级并从子级中移除 display:inline-block

.vc_grid.vc_row.vc_grid-gutter-30px .vc_pageable-slide-wrapper {
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
}   
.vc_basic_grid .vc_grid.vc_row .vc_grid-item.vc_visible-item, .vc_media_grid .vc_grid.vc_row .vc_grid-item.vc_visible-item {
    width: 50%;
}

移动响应 - 投资组合自定义网格

1 个答案: