Загрузите одно изображение для мобильного сайта и скройте другое, загрузите скрытое изображение и скройте мобильное изображение в Squarespace - PullRequest
Новая
       7

Загрузите одно изображение для мобильного сайта и скройте другое, загрузите скрытое изображение и скройте мобильное изображение в Squarespace

0 голосов
/ 09 февраля 2019

На моем сайте квадратного пространства (http://rmcclainmedia.com) у меня есть изображение на второй странице указателя. Сейчас это "Client-logos.png". Это изображение не так легко увидеть на мобильной платформе.Поэтому я хотел бы создать некоторый код, чтобы при доступе из настольной программы изображение, которое я хочу отобразить, было видимым, а отображение для мобильного изображения скрыто. А для мобильных устройств я хочу, чтобы оно было наоборотЯ понимаю процесс, который должен произойти, просто не знаю, как правильно написать этот код и внедрить его в мою страницу с квадратным пространством.

1 Ответ

0 голосов
/ 09 февраля 2019

Существует несколько вариантов подходов для обработки этого в Squarespace с общей точки зрения:

  1. Использование медиазапросов CSS для простого скрытия / отображения определенного раздела или блока на основе браузераwidth.

  2. Используйте медиазапросы CSS, чтобы скрыть / показать раздел или блок и, соответственно, показать / скрыть другой раздел или блок на его месте в зависимости от ширины браузера.

  3. Используйте блок другого типа, например блок галереи или сводки, а не блок изображения, который будет настраивать собственный макет на основе ширины браузера.

Обратите внимание, что идентификаторы section, используемые в следующих примерах, предполагают, что ваш первый слаг URL-адреса секции индекса 10101 * - это «new-page», а второй называется «new-page-mobile».Squarespace будет генерировать идентификаторы из слаг URL.Это пример;ваш может отличаться.CSS должен быть добавлен через Редактор CSS .Также обратите внимание, что если при отображении / скрытии блоков вместо секций , приведенный ниже код необходимо будет изменить, чтобы использовать идентификаторы блоков вместо идентификаторов секций.

Вариант 1:достаточно просто.В вашем конкретном случае следующий CSS, вставленный с помощью редактора CSS, выполнит это: 

@media screen and (max-width:640px) {
  #new-page {
    display: none;
  }
}

Вариант 2, конечно, аналогичен, за исключением того, что вместо простого скрытия раздела вы также показывает другой.Предполагается, что вы создали дополнительный раздел страницы индекса прямо под первым вопросом: 

@media screen and (max-width:640.1px) {
  #new-page {
    display: none;
  }
}
@media screen and (min-width:640px) {
  #new-page-mobile {
    display: none;
  }
}

Что касается варианта 3, с использованием сетки блока галереи или summaryСетка блока макет и загрузка логотипов по отдельности, макет будет в некоторой степени управлять собой, укладывая логотипы на более узкие ширины.

(Кстати: я изначально думал, что вы говорите об изображении на "страница "о", которая не идеально составлена ​​на мобильных устройствах, поскольку вы, субъект, находитесь за кадром. Если вам в конечном итоге понадобится решение этой проблемы, опубликуйте новый вопрос.)

...