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

Posted 2023-03-06

【中文标题】移动响应 - 投资组合自定义网格

【英文标题】：Mobile Responsiveness - Portfolio Custom Grid

【发布时间】：2021-05-13 11:57:29

【问题描述】：

我正在尝试让我的投资组合网格在移动设备上显示为 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

【参考方案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%;

【讨论】：

成功了，谢谢！我为 4 列设置了 25%，现在让它适合“一页视图”。如何防止这影响上一张幻灯片中的“团队”网格。它还以 25% 显示团队网格项目。