Как добавить адаптивный дизайн к теме на Postach.io

Postach.io предлагает по умолчанию около десятка тем для вашего будущего блога. Часть из них уже поддерживают адаптивный дизайн, а часть нет. В сегодняшнем посте из серии Хитрости Postach.io я расскажу как легко добавить поддержку различных устройств в стандартные темы платформы.

Адаптивный веб-дизайн (англ. Responsive Web Design) — дизайн веб-страниц, обеспечивающий корректное отображение сайта на различных устройствах, подключённых к интернету и динамически подстраивающийся под заданные размеры окна браузера.

Мой блог основан на теме Simple и на ее основе я покажу как я добавил адаптивный дизайн.

Для начала работы нужно перейти в раздел Source Code в настройках вашего блога. Там вы увидите стандартный код темы:

В случае с темой Simple достаточно найти кусок кода, в котором содержится весь блок постов. Здесь это 61-ая строка div container. В других темах это так же container или raw, как в теме Apex:

Именно к этому div и нужно применить адаптивный css. Для этого нужно создать .css файл со следующим кодом:

Между фигурными скобками {} нужно вставить код, примерно, такой:

'{.container {
max-width: 320px} }}'

Итоговый результат должен выглядеть, примерно, так:

Для каждой ширины экрана я прописал такую же максимальную ширину основного контейнера темы. Благодаря чему, весь блог становится адаптивным. Путь к новому .css файлу нужно прописать в хэдере вашего сайта:

Ссылки по теме

Хитрости Postachio. Где хранить скрипты для своего блога.

Комментарии