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

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%;
}