如何解决Squarespace CSS:当我将带边框的列的代码定位到某个部分时,移动设备宽度会缩小到屏幕的一半以下
网站网址:https://www.ukulelekidz.com/camp
.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;
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。