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

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 给 parent 并从 child[=14= 中删除 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%;
}

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

Mobile Responsiveness - Portfolio Custom Grid

css

wordpress

mobile

responsive