Как заставить страницу Squarespace с пользовательским CSS правильно отображать на мобильном телефоне? - PullRequest
Новая
       10

Как заставить страницу Squarespace с пользовательским CSS правильно отображать на мобильном телефоне?

1 голос
/ 11 января 2020

Я делаю этот сайт для друга и в значительной степени уже сделал и готов к go, за исключением того, что страница не отображается должным образом на мобильном телефоне. Проблемы, с которыми я сталкиваюсь, больше связаны с тем, как реализовать CSS с этими шаблонами Squarespace, чем с использованием мобильных стилей. Прямо сейчас я пытаюсь заставить мобильный указатель c CSS отображаться на мобильных страницах, но он не показывает, как я хочу. Навбар должен находиться под lo go, а сам lo go в правильном размере в верхней части страницы. Это мое 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;
  }}

Я думаю, что моя проблема связана с Панель навигации и пользовательское изображение lo go я добавил в шапку. Кажется, что lo go не изменяет размеры должным образом, чтобы все остальное на странице отображалось правильно на мобильном телефоне. Страница 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%;
  }
}

Мне удалось заставить lo go перемещаться и изменять размеры, однако навигационная панель, которую Squarespace автоматически добавляет к мобильному виду страницы, размещена неправильно, то есть я Вам нужно lo go вверху страницы и панель навигации для мобильных устройств внизу. Это мой Navbar CSS в мобильном телефоне: 

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

Я могу переместить панель навигации и вот go, но по какой-то причине он сбрасывается и отображается так, как он был изначально (вот go слишком большой и Навбар сверху lo go). Как я могу это исправить и правильно отобразить эти элементы на странице мобильного телефона?

1 Ответ

0 голосов
/ 17 января 2020

Попробуйте:
"Квадратная кнопка": 

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

"Положение и размер Lo go" 

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