Html 如何使用自定义CSS在手机上正确显示Squarespace页面？

我一直在为一个朋友制作这个网站，几乎已经完成并准备好了，只是这个页面在手机上不能正常显示。我面临的问题更多的是如何使用这些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页面位于，查看该页面的密码为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%;
  }
}

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

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

  .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;
}

@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; 
}

“按钮位置”：

  .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;
}

@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; 
}

“位置和尺寸徽标”

删除该代码：

  .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;
}

@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; 
}

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

  .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;
}

@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; 
}

“按钮位置”：

  .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;
}

@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; 
}

“位置和尺寸徽标”

删除该代码：

  .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;
}

@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; 
}

---

这似乎是一个很好的底漆。你必须花一点时间来学习“媒体查询”和“响应式设计”。您能否更具体地说明“在手机上无法正确显示”的含义？“特定于移动设备”的css不起作用是因为您无法将其添加到SquareSpace中，还是因为css的行为不符合您的预期？一个链接比一个网站链接要好。@sallf如果我创建一个网站的最小复制品，我没有问题，我的问题是Squarespace如何设置页面以及如何控制这些不同元素的CSS。因此，在尝试了多种媒体屏幕设置之后，我不知道如何为Squarespace元素实现媒体CSS。如果你在移动屏幕上查看页面，你可以看到我的问题所在。这似乎是一本很好的入门书。你必须花一点时间来学习“媒体查询”和“响应式设计”。您能否更具体地说明“在手机上无法正确显示”的含义？“特定于移动设备”的css不起作用是因为您无法将其添加到SquareSpace中，还是因为css的行为不符合您的预期？一个链接比一个网站链接要好。@sallf如果我创建一个网站的最小复制品，我没有问题，我的问题是Squarespace如何设置页面以及如何控制这些不同元素的CSS。因此，在尝试了多种媒体屏幕设置之后，我不知道如何为Squarespace元素实现媒体CSS。如果您在移动屏幕上查看页面，您可以看到我的问题所在。