调整Cargo Collective网站桌面与移动端的列间距

步骤1：定位目标元素的CSS选择器 #

• 打开浏览器开发者工具（按F12），切换到移动端视图
• 选中简历的列元素，查看它的类名或ID（比如可能是.resume-column或.cargo-two-column这类名称）

步骤2：添加自定义CSS代码 #

在Cargo Collective的「Settings」→「Custom Code」区域，插入以下媒体查询代码（替换成你实际找到的选择器）：

/* 针对宽度小于768px的移动端设备调整列间距 */
@media (max-width: 768px) {
  /* 替换为你页面中列元素的实际类名 */
  .resume-column {
    margin: 0 15px; /* 左右各留15px间距，可按需修改数值 */
  }
  /* 若列是通过父容器的gap属性控制间距，可调整父容器 */
  .resume-container {
    gap: 20px; /* 列之间的间隔，移动端生效 */
  }
}

步骤3：桌面端间距优化（可选） #

如果桌面端两列间距也需要调大，补充以下代码：

/* 桌面端列间距调整 */
.resume-column {
  margin: 0 25px; /* 按需修改数值 */
}

注意事项 #

• 必须替换代码中的类名，确保和页面实际元素的类名一致
• 调整数值后实时预览页面，直到效果符合预期
• 若Cargo有预设的间距类，也可以尝试给列元素添加类似padding-large的预设类

内容的提问来源于stack exchange，提问作者David Roseberry