Изменение порядка блоков Squarespace с использованием CSS - PullRequest
Новая
       31

Изменение порядка блоков Squarespace с использованием CSS

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

Как изменить порядок фотографий и текста в Squarespace, чтобы он отображался в одном направлении на рабочем столе, но при этом изменял порядок на мобильном? Я видел подобные вопросы, поэтому попробовал свой собственный код, но он ничего не меняет.

У меня есть индексные страницы, которые уравновешивают макет страницы над ней на рабочем столе (section1 = изображение слева / текст справа, section2 = текст слева / изображение справа)

на мобильном телефоне поток обратный (раздел1 = изображение сверху / текст снизу, раздел2 = текст сверху / изображение снизу).

веб-страница: www.northcountryarmory.com/fort-knox

Ответы [ 2 ]

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

Это действительно довольно распространенная потребность на сайтах Squarespace (и была в течение многих лет ). К сожалению, Squarespace в настоящее время не предлагает каких-либо мобильных макетов c вариантов макета блока.

Кроме того, макет каждого сайта достаточно отличается, что затрудняет написание универсального бита CSS. Это индивидуально для каждого случая.

В вашем случае вы можете указать целевую страницу c (с помощью идентификатора коллекции в элементе body), а затем настроить таргетинг на каждый индекс с равным номером. раздел страницы. Обратите внимание, что нацеливание таким образом повлияет только на эту страницу, и только на индексные разделы на этой странице.

Вставьте следующее МЕНЬШЕ CSS через CSS Editor / Custom CSS: 

@media screen and (max-width: 640px) {
  #collection-5db8b183ea3e1a49745ba89a .Index-page:nth-child(even) {
    .sqs-row {
      display: table;
    }
    .sqs-col-6:last-child {
      display: table-header-group;
    }
  }
}

Выше не используется flexbox, но вместо этого используются таблицы CSS. В вашем случае это требует меньше кода и будет более совместимым. Flexbox - это еще один способ сделать это.

Для тех, кто может это прочитать, вам, вероятно, придется задать новый вопрос для вашего конкретного c сайта / контекста (и обязательно упомянуть код ты пробовал).

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

Вы можете использовать flexbox для этого двумя способами. Flexbox позволяет вам изменить порядок , если это то, что вы ищете (это мое понимание того, что вы написали). В качестве альтернативы вы также можете использовать flex order , чтобы вручную изменить порядок указанных c элементов на странице.

...