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

Question

bounty到期在3天内。这个问题的答案有资格获得+ 50声望赏金。feners想要引起更多关注对此问题。

我一直在为一个朋友创建这个网站，除了网页无法在移动设备上正确显示之外，几乎已经完成并准备就绪。与如何使用移动样式相比，与这些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;
  }}

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

UPDATE

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

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

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

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

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

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