如何使用自定义 CSS 获取 Squarespace 页面以在移动设备上正确显示？答案

【问题标题】：How to get Squarespace page with custom CSS to display properly on mobile?如何使用自定义 CSS 获取 Squarespace 页面以在移动设备上正确显示？
【发布时间】：2020-04-29 00:14:06
【问题描述】：

我一直在为一个朋友制作这个网站，并且几乎已经完成并准备好了，只是页面无法在移动设备上正确显示。我遇到的问题更多地与如何使用这些 Squarespace 模板实现 CSS 而不是如何使用移动样式有关。现在我正试图让移动特定的 CSS 显示在移动页面上，但它没有显示我想要的方式。导航栏应位于徽标下方，徽标本身应位于页面顶部的适当大小。这是我的 CSS：

footer {
    display:none  
}

#collection-5de6d28545f1a7075b7a2741 #canvas{
  max-width: 100% !important;
 padding-left: 0px !important;
 padding-right: 0px !important;
 padding-top: 11px !important;
 background: url(https://static1.squarespace.com/static/5cff45ae4a957c0001a6673b/t/5dc6fcead1c0ab7b9e4f5e60/1573321963518/richie_+5.jpeg)no-repeat center center;
  -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#collection-5de6d2e045f1a7075b7a34a3 #canvas{
  background-position: cover;
  max-width: 100% !important;
 padding-left: 0px !important;
 padding-right: 0px !important;
 padding-top: 11px !important;
  background: url(https://static1.squarespace.com/static/5cff45ae4a957c0001a6673b/t/5df035e05d133c6a73380fa1/1576023521067/IMG_1683.JPG)
}

#collection-5de6d306623e3a140935efd4{
  max-width: 100% !important;
 padding-left: 0px !important;
 padding-right: 0px !important;
 padding-top: 11px !important;
  background-position: cover;
  -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#collection-5de6d306623e3a140935efd4 #canvas {
  background-position: cover;
  max-width: 100% !important;
 padding-left: 0px !important;
 padding-right: 0px !important;
 padding-top: 11px !important;
   background: url(https://static1.squarespace.com/static/5cff45ae4a957c0001a6673b/t/5e13d4a0718bc301c1c7efcd/1578357920526/512679.jpg)
}

#collection-5de7d7f5cb49636dc8f582f0 #canvas{
  background-position: cover;
  max-width: 100% !important;
 padding-left: 0px !important;
 padding-right: 0px !important;
 padding-top: 11px !important;
   background: url(https://static1.squarespace.com/static/5cff45ae4a957c0001a6673b/t/5e13d4a0718bc301c1c7efcd/1578357920526/512679.jpg)
}

#collection-5de7f3679b018c732a115e55 #canvas {
  background-position: cover;
  max-width: 100% !important;
 padding-left: 0px !important;
 padding-right: 0px !important;
 padding-top: 11px !important;
   background: url(https://static1.squarespace.com/static/5cff45ae4a957c0001a6673b/t/5e13d4a0718bc301c1c7efcd/1578357920526/512679.jpg)
}

.page-divider {
  display: none
}

 .logo-image .logo img{
   max-height: 200px;
   max-width: 400px;
   position: relative;
   right: -50px;
   top: -50px 
 }

.info-footer-wrapper {
  display: none
}

@media screen and (max-width: 641px) {
body {font-size: __ }
h1 {font-size: __ }
h2 {font-size: __ }
h3 {font-size: __ }
}

@media screen and (max-width: 500px) {
  #header {
    float: none;
    display: block;
    text-align: left;
  }}

我认为我的问题在于添加到标题的导航栏和自定义徽标图像。徽标似乎没有正确调整大小以使页面上的其他所有内容都无法在移动设备上正确显示。 Squarespace页面可以在https://richiequake.com找到，查看密码是Help123。

更新

我已经取得了一些进展。使用：

@media only screen and (max-width: 400px) {
  #yui_3_17_2_1_1578763488616_571 {
    position: relative;
    right: 10%;
    width: 20%;
    top: -100%;
  }
}

我已经能够让徽标移动和调整大小，但是 Squarespace 自动添加到页面移动视图的导航栏没有正确放置，这意味着我希望徽标位于页面顶部，并且下方的移动导航栏。这是我在移动设备中的导航栏 CSS：

@media only screen and (max-width: 400px) {
  #mobileMenuLink {
    position: relative;
    top: 20%;
  }
}

我可以移动导航栏和徽标，但由于某种原因，它会重置并按原样显示（徽标太大，导航栏位于徽标顶部）。如何解决此问题并让这些元素在移动页面上正确显示？

【问题讨论】：

这似乎是一本很好的入门书。你必须花一点时间来学习“媒体查询”和“响应式设计”。 internetingishard.com/html-and-css/responsive-design
您能否更具体地了解“无法在移动设备上正确显示”是什么意思？ “特定于移动设备”的 css 是否因为您无法将其添加到 SquareSpace 或 css 的行为不符合您的预期而无法正常工作？ minimal reproducible example 比网站链接更好。
@sallf 如果我创建网站的最小复制品，我没有问题，我的问题是 Squarespace 如何设置页面以及如何控制这些不同元素的 CSS。所以在尝试了多种媒体屏幕设置后，我不知道如何为 Squarespace 元素实现媒体 CSS。
如果您在手机屏幕上查看该页面，您可以看到我的问题。

标签： html css squarespace

【解决方案1】：

试试这个：
“方形按钮”：

  .page-borders-thick #mobileMenuLink {
        border-bottom-width: 2px;
        padding: 5%; // ADD PADDING
    }

“按钮位置”：

@media only screen and (max-width: 640px)
#mobileMenuLink {
    margin: 0;
    display: inline-block; //change block to inline
    font-family: "Helvetica Neue",Arial,sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 1.2em;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
    border-bottom-style: solid;
    border-bottom-color: #fff;
    visibility: visible;
}

“位置和大小徽标”

.logo-image .logo img {
    position: relative;
    right: -50px;
    top: -100px;
    width: 100%; //add for good resize based to screen  
}

删除该代码：

@media only screen and (max-width: 640px)
.canvas-style-masthead-logo-left.header-subtitle-none #lower-logo, .canvas-style-masthead-logo-right.header-subtitle-none #lower-logo {
     padding-top: 0px; 
}

【讨论】：