Squarespace CSS：当我将带边框的列的代码定位到某个部分时，移动设备宽度会缩小到屏幕的一半以下

问题描述

网站网址：https://www.ukulelekidz.com/camp

这是我的带有阴影的 2 列边框的桌面代码（效果很好）

.sqs-col-6 {border: 2px solid #172236;width:47%!important;margin-left: 2.5%; Box-shadow: 2px 5px 10px rgba(0,0.2)}

这是我对移动设备的调整...（效果也很好）

@media only screen and (max-width:768px){ .sqs-col-6 {margin-left:0%!important;margin-bottom: 7%}} 

问题是边框适用于我网站上的所有 2 列部分，所以我然后只定位我想要的部分并且很棒，它适用于桌面，但随后会弄乱移动视图。这是我用来定位该部分的完整代码：

section[data-section-id="6038f9680adafe73679299cc"]
.sqs-col-6 {border: 2px solid #172236;width:47%!important;margin-left: 2.5%; Box-shadow: 2px 5px 10px rgba(0,0.2)}
@media only screen and (max-width:768px){ .sqs-col-6 {margin-left:0%!important;margin-bottom: 7%}}

查看当我定位时移动视图会发生什么的屏幕截图。

我确实找到了一种解决方法，即不定位该部分，然后从它出现在所有其他 2 列部分上的位置删除边框效果...示例：

section[data-section-id="60387a655347d0248f70c4ea"]{.sqs-col-6 {border: none; Box-shadow:none}}

但我不认为 CSS 应该这样工作。我如何定位 squarespace 中桌面部分的代码，然后修复移动代码？

我是 CSS 新手，所以感谢您的帮助！谢谢！

解决方法

下面的 CSS 代替你现在拥有的，将添加所有宽度的边框和框阴影，将在宽的宽度水平分隔列，并在移动设备上垂直分隔它们。左边距和右边距分开，以便框居中。

#page-section-60387a655347d0248f70c4f4 .sqs-col-6 {
  border: 2px solid #172236;
  box-shadow: 2px 5px 10px rgba(0,.2);
  box-sizing: border-box;
}
@media screen and (min-width: 768px) {
  #page-section-60387a655347d0248f70c4f4 .sqs-col-6 {
    width: 47.5% !important;
    margin-left: 1.25%;
    margin-right: 1.25%;
  }
}
@media screen and (max-width: 767px) {
  #page-section-60387a655347d0248f70c4f4 .sqs-col-6 {
    margin-bottom: 35px;
  }
}