Здравствуйте, уважаемые друзья. Сегодня я покажу, как адаптировать шаблон WordPress с 3-мя колонками. Такую статью и видеоурок попросил меня опубликовать один из моих зрителей канала на YouTube.
Как адаптировать шаблон с двумя колонками, я рассказывал и показывал в статье «Адаптивный дизайн сайта – как адаптировать шаблон WordPress». Так, что если вы её читали, то многое вам будет уже понятно. Во многом процесс похож. Весь секрет в правильном подборе стилей css.
Найти сегодня тему (шаблон), который не адаптирован (не поддерживает адаптацию под мобильные устройства), крайне, трудно. Так как все новые шаблоны поддерживают адаптацию.
Но, я все, же нашёл одну тему, которая в идеале, по структуре, похожа на образец, который меня попросили использовать в качестве примера.
Вот пример сайта, на который я ориентировался при подборе подходящего шаблона для демонстрации.
А вот шаблон, который я нашёл. Дизайн отличается, но общая структура у них одинакова – 3 колонки. И именно два сайтбара, с одной стороны.
Анализ шаблона перед началом работ.
Залог успешной адаптации шаблона заключается в грамотном применении медиазапросов и стилей css. Прежде чем приступить к адаптации вы должны провести анализ шаблона. Проверить наличие метатега viewport, определить основные блоки шаблона, какие они имеют классы и идентификаторы, какие размеры, отступы заданы для них, какие стили обтекания или позиционирования применены.
Все это нужно будет для успешной адаптации шаблона. Проведя анализ и поняв, как устроен шаблон, его в дальнейшем легче адаптировать. Здесь важна каждая мелочь.
Итак, первым делом, открываете сайт в браузере и исследуете исходный код шаблона на наличие метатега «viewport». Для адаптивных шаблонов он нужен в обязательном порядке.
Для открытия исходного кода нажимаете комбинацию клавиш CTRL+U, а чтобы найти нужный фрагмент в коде используйте комбинацию CTRL+F и введите поисковый запрос «viewport».
Так как шаблон неадаптивный, то и метатега в нём нет.
Следующим шагом нужно выяснить, какие основные блоки имеет шаблон, и проанализировать стили, присвоенные этим блокам. Лучше взять тетрадь, нарисовать схему шаблона и подписывая блоки выписать стили оформления.
А поможет в этом панель разработчика в браузере. Для её вызова нажмите клавишу F12.
Смотрим на структуру шаблона, в моём случае после тега body идёт блок ДИВ с идентификатором «page». Именно в этом блоке собраны все остальные блоки шаблона. И ширина его 1020 пикселей.
Следующий важный блок – это шапка (header), но в моём шаблоне этот блок не имеет фиксированной ширины и, значит, будет подстраиваться под размеры блока «page». Впрочем, меню тоже.
Идём далее и видим блок с контентом ДИВ и идентификатором id=»content», этот блок имеет ширину 540 пикселей.
Общий блок для двух сайтбаров имеет идентификатор id=»sidebar» и ширине его 360 пикселей.
А в этом общем блоке, расположены левый и правый сайтбары меньшего размера. Левый с идентификатором id=»l_sidebar» и шириной 170 пикселей и правый id=»r_sidebar» 140 пикселей.
Надеюсь, вы обратили внимание, что размеры блоков меньше, чем могли бы поместиться в общем блоке «page». Это потому что для каждого блока есть внутренние и внешние отступы и их тоже нужно учитывать. Так как если на компьютерной версии всё смотрится гармонично, то в мобильной версии такие отступы неприемлемы. И в медиазапросах это нужно учитывать.
Далее, идёт блок подвала (footer), который не имеет фиксированной ширины и будет подстраиваться под размеры родительского контейнера. В этом примере это «page».
Процесс адаптации шаблона.
Вот так сейчас выглядит шаблона на мобильных устройствах. То есть до адаптации.
Сервис Page Speed Insights тоже ругается по этому поводу.
Итак, приступаем.
Первым делом добавим метатег «viewport». Открываем административную панель WordPress – «Внешний вид» — «Редактор» — «Заголовок (header.php)».
В этом файле, обычно, прописывают подключение метатегов, стилей, библиотек и скриптов. Хотя, скрипты лучше перенести в подвал.
В общем, в этом файле, между тегами <head>…</head>вставляем вот этот код:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Сохраняем страницу и идём дальше.
Теперь открываем файл «Таблица стилей (style.css)». Здесь прописаны основные стили. Мы не будем создавать отдельный файл под мобильные стили, а пропишем их в конце этого файла.
Примечание: Только будьте внимательны, мобильные стили должны быть в самом конце. Если в будущем вы захотите добавить стиль оформления, то делайте это выше этих стилей.
Для написания медиазапросов и стилей под них нужно определить «Точки излома» — порог, при котором дизайн должен меняться.
Определение точек проходит при помощи панели разработчика в браузере. Для своего шаблона я определил три точки, когда дизайн начинает ломаться.
Первая точка – 992 пикселя по ширине.
Вторая точка – 760 пикселей по ширине.
И третья точка – 600 пикселей по ширине.
Под эти точки я и буду создавать медиазапросы.
Открываю таблиц стилей и в конце добавляю медиазапрос и вот эти стили:
/* Адаптивный дизайн ------------------------------------- */ @media screen and (max-width: 992px) { img {max-width: 100%; height: auto;} body { background: #FFF; } body.custom-background { background-color: #FFF !important; } #page { width: 100%; border: 0; } #menu-header { margin: 0; } .narrowcolumn {width: 56%; float: left; padding: 0 0 20px 10px;} #sidebar {width: 35%; padding: 10px 10px 10px 0; } #l_sidebar { float: none; display:block; padding: 5px; margin: 5px; width: 95%; } #r_sidebar { float: none; display:block; padding: 5px; margin: 5px; width: 95%; } }
Описать всё довольно сложно, поэтому я подробно всё покажу и расскажу в видеоуроке. Но идея такова. Когда ширина экрана становится меньше 992 пикселя, начинают работать стили из медиазапроса. То есть фиксированная ширина в пикселях пересчитывается в проценты для основных блоков по формуле:
Блок с контентом (540рх) / На блок страницы (1020рх) * 100%
Затем работая с панелью разработчика, выясняются стили, отвечающие за отступы и обтекание. За счёт уменьшения отступов, ширина самого блока может быть увеличена в процентах. За счёт стилей «float» – определяется, с какой стороны блоки обтекают друг друга.
В общем, на первой точке я сделал так, чтобы два сайтбара преобразовались в один и гармонично адаптировались с блоком контента.
Следующая точка 760 пикселей. При такой ширине экрана, сайтбар и контент в одном ряду не помещаются, и поэтому я смещаю сайтбар вниз под блок с контентом, и ширину увеличиваю до 95%.
Для этого я использую вот этот медиазапрос и стили:
@media screen and (max-width: 760px) {
.narrowcolumn {
float: left;
display:block;
padding: 5px;
margin: 5px;
width: 95%;
background: #fff;
clear:right;
}
#sidebar {
float: none;
display:block;
padding: 5px;
margin: 5px;
width: 95%;
background: #fff;
}
}
И в последней точке, 600 пикселей, поиск по сайту переношу над заголовком. В принципе этого можно было не делать, но я решил, что так будет лучше.
Для этого использовал вот этот медиазапрос:
@media screen and (max-width: 600px) {
.header-search {
float:none;
display:block;
}
}
На этом адаптация шаблона почти закончена. Я не коснулся только меню. Так что сейчас можно проверить шаблон в сервисе Page Speed Insights и посмотрим, как изменилась ситуация с удобствами для пользователей мобильных устройств.
Как видите, почти идеально. Так как меню я не трогал, то результат 99 из 100.
Адаптация меню была уже рассмотрена в статьях и видеоуроках ранее. Я сейчас быстренько сделаю адаптивное меню, и результат будет доведён до идеала. Как и хотели 100 из 100.
Вот и всё, шаблон адаптирован. В качестве наглядного примера, предлагаю посмотреть видеоурок, где я показываю весь процесс в деталях.
У меня на этом сегодня всё. Друзья, желаю вам успехов! До встречи в новых статьях и видеоуроках.
С уважением, Максим Зайцев.
Столько телодвижений надо делать…
По-моему, если ты спец по кодам, то — да, можно и поиграться, а так купил за 400 руб. у Борисова адаптированный шаблон — и спишь спокойно,.. Там и плагины, и форма подписки, и как адаптировать шаблон под себя — всего 5 видеоуроков.
Не сочтите за рекламу — я просто вслух рассуждаю…
Конечно, если есть желание разобраться, то статья Ваша сильно поможет, но ведь время….
Спасибо! Вы подтвердили моё мнение, что если чего-то не знаешь — купи.
Здравствуйте, Галина. Только вот зачем платить 400 рублей. Сегодня все современные шаблоны адаптивные. И настраивать ничего не надо. А вот если шаблон старый и в него вложено много сил, менять не хочется, то адаптировать можно своими силами. Сложно кажется только в начале, но когда принцип становится понятен, то и процесс идёт гораздо быстрее.
Хорошую тему затронули, деньги и время
Вообще, если вот так откровенно базарить т.е. говорить, то информация за бумаги усваивается гораздо лучше. Это всего касается, ты хоть влюбись в свою тему, но если ты купишь тему, то ты мигом пересядешь на платную. Уже, даже учёными доказано, что деньги человеком воспринимаются, как живое существо. Ведь реально, столько беспредела и за этих бумажек 
К сожалению и в интернете без денег никуда, было бы у меня много «бабосов», я бы за одним проектом не сидел, на меня бы уже целый штаб копирайтеров пахал 
Согласен, каждый отталкивается от своих знаний, времени и финансовых возможностей. Можно использовать тему, которая понравилась пару лет назад, но тогда её придётся адаптировать. Сделать этот можно самостоятельно или заплатить деньги. А можно сменить тему и делать все настройки заново. Вариантов масса.
Я отправил его на биржи статей, и статьи по такой цене он нашёл. На счёт качества, сомнительно конечно. Но, как видишь много денег не надо для найма армии копирайтеров. 
Вань, ты вот понимаешь, как пишутся статьи (хорошие статьи), сколько времени уходит. И ты примерно представляешь сколько такая работа должна стоить. Так вот ко мне обратился один человек, совсем недавно, и попросил подсказать, где ему купить статей по 30-40 рублей (качественных), для наполнения нового проекта.
А нахрена такой текст тогда нужен? Я и сейчас порой на биржи заглядываю для подработки, скажу честно, статьи пишутся, но это рерайт!!! Понимаешь, ты никогда не станешь качественные статьи выставлять на бирже, ну как бы они проверенны конечно же с помощью той же Орфограммки, но идут они на скорость, нет общения с аудиторией. В общем, понятие копирайтер — уже давно размылось, представляется эдакий школьник, строчащий тексты за 20-30 рублей. Редко кто платит больше 80 рублей за килознак, я к тому, что никто не заинтересован в создании качественных, насыщенных статей! Ты скажешь, это ведь в интересах веб-мастера? Нифига, большинству грубо говоря «начихать» на свои детища, у них могут быть по 1 000 статей на сайте, но они созданы лишь для рекламы, больше страниц — выше прибыль. Да и администратор, как правило, не смотрит на качество, заказал, например, 5 статей — выполнил норму! Такое воспитание, сложно это переосмыслить, да и если помнишь мой первый блог, то там такая же хренотень, статьи пишутся быстро и их много, а какой толк? У меня и сейчас больше половины статей полностью надо переделывать, потому что г***но, сделаны на скорость. Я сам хватаюсь за голову, сколько же я сам себе проблем создал. Вот тебе моя последняя статья про Ccleaner, она вышла около 12 000 символов, с кучей скринов — ранее, я уже писал про клеанер, но там было максимум пару тыщёнок символов. Попросту говоря, наплевательское отношение к труду и приводит к каламбуру, такое везде.. В реале, точно такая же ситуация и виной всему именно наплевательство к себе, а впоследствии и к окружающим. В общем, если на меня и будут работать копирайтеры, то это будут действительно люди, которым интересна тема, они заинтересованы в развитии проекта.. На биржах совсем другая политика, да и я сам понимаю, что нормальный текст (статья) — это 3 000 — 4 000 рублей.
Ты попал прямо в точку, подобные статьи покупаются именно для наполнения сайта и заработка на рекламе. Качество материала владельцев не волнует. Я как-то даже читал одну из таких статей, где были описаны способы заработка для новичков. Так вот в этой статье было повествование — для чего создаются сайты, что они создаются только для заработка, а о том что они сделаны для людей и речи не идёт. Печально.
Вот именно, что новичкам пудрят мозги! Поскорее создавай сайт — поскорее иди зарабатывай.. Я тут для интереса читаю одного чувака (по другому его назвать нельзя), так тоже всё время кичится, что у него куча денег из интернета и большая база подписчиков. А какими путями? На баннере девушка с просьбой «я зарабатываю 80 00, погасила кучу кредитов», в общем, жизнь удалась! И люди ведутся на эту этикетку, также сейчас создают «закрытые школы обучения новичков» или марафоны всякие. Я очень рад, что ничего из вышеперечисленного не вкусил! Мне повезло, я попал именно к хорошему веб-мастеру «в руки». У каждого был наставник, так вот — этот наставник делал конечно же рекламные статьи, но он писал правду про весь рунет в целом». Он мне дал правильное направление и всё это я получил бесплатно! Он Просто пилил статьи на своём блоге и в итоге зарабатывает баснословные суммы.
Максим, Открой сайты про заработок и всё поймёшь — людям, не говорят, что можно получать приемлемые суммы в интернете… Сразу зазывают на какой-нибудь почтовик, а почему? Это выгодно, гораздо больше рефералов перейдёт на лёгкий заработок (где можно одной рукой ковыряться в носу, а второй кликать по мышке). Если такой человек одумается и начнёт создавать сайты, что из этого выйдет? Я уже подробно расписал в предыдущей статье.
Вань, повезло тебе с наставником. Есть у кого спросить и на кого равняться. Чего нельзя сказать о тысячах новичков приходящих на быстрыми деньгами в интернете. Но, кстати, они сами виноваты в том, что ведутся на откровенный развод. Халявы нет и не было. Ни в оффлайне, ни в онлайне. Реально зарабатывают на таких новичках, авторы курсов с заголовками «3000-12000 рублей в день». У них всё отлажено, каждую неделю новый курс, с новым автором, куча купленных отзывов и очередной клиент уже в кармане.
Эту тему можно обсуждать бесконечно, и каждый делает свой выбор. Только вот почему-то на нормальные продукты люди реагируют скептически, а на предложения «всё и сразу» ведутся. Психология!
Сейчас курсы по сути одни и те же.. Все хотят заработать в интернете — особенно модно продавать инфопродукты «как заработать на сайте» и т.д. Просто, как по мне, если ты зарабатываешь скажем 100 000 рублей в интернете на сайтах, то зачем тебе собственно создавать курсы? Те кто продают такие курсы, они сами ничего не добились или учат других о том, что надо бы создавать инфопродукты. То есть, получается такой «круговорот курсов в природе».
И блогов много, на подобии того же Борисова, где рассказывается, как откусить часть большого денежного пирога. Гуру себя возвышает, делает из себя человека-загадку, кичиться результатами!
Ещё сейчас модно смеяться над инфобизнесменами, мол, посмотрите какой он «лошпет», не то что я! У меня курсы ого-го!
В общем, я сомнительно отношусь ко всему инфобизнесу, я лучше допущу ошибки, над которыми «посмеются» гуру, чем буду следовать за ними. Те кто действительно чего-то добились, учились у таких как Попов, который не кричит на весь интернет, какой он мего-специалист. Да и много веб-мастеров, которые попросту обучают новичков за бесплатно.
Согласен. Вот только, Евгений Попов добился многого благодаря своему таланту и курсы у него как раз на тему создания сайтов и инфопродуктов. Причём лучшие в рунете.
А развод идёт на мусорных курсах по быстрым способам заработка. И зачастую они даже не связаны с созданием сайтов и тем более инфопродуктов.
По хорошему, пока новичок разберётся, кто положительный герой в сфере инфобизнеса, он либо уйдёт и забудет о заработке в интернете, либо начнёт зарабатывать.
На самом деле, мы очень «забитые» люди и ничего не видим.. Если конкретно так оглядеться по сторонам, то можно увидеть, что сейчас все кому не лень продают курсы. Всех больше я ненавижу воду, вроде хаваешь, хаваешь информацию, а в результате — ничего.. Или ещё любят «продавать» себя, человек вроде суть льёт, а получается, что лапшу на уши вешает и подталкивает на покупку своей услуги или курса. Очень сильное воздействие оказывается на человека видео, потому что тут идёт «лапша» по всем направлениям, я сам попадал в эти жадные лапы. Получаются эдакие «разговоры на кухне», сейчас реально не надо ломиться в дома и предлагать пылесосы, создавай курсы, вешай лапшу — всё легально, ах да, можно ещё ИП создать для пущей надутости. Тому пример СМИ, люди обсуждают глобальные политические новости в своём Мухос**ке, но по сути, ничего не меняется, в прочем. как и в интернете…
Да, Попов умеет объяснять, но голос у него мягко говоря какой-то странный.. Чем-то на уточку смахивает)))
В интернете в последнее время действительно много мусора, но всё же хороших продукты тоже попадаются. Я к примеру на блоге рекомендую только, те продукты, которые сам опробовал и которые принесли мне результат. Надеюсь, что этим я хотя бы небольшой части своих посетителей помогаю не попасть на лохотрон.
Я курсы Попова «пихаю» в массы + у него ещё есть жена, она тоже инфобизнесмен. Там тоже интересные курсы по фотошопу и снимкам. Всех больше мне надоел Вергус, у него вроде как курсы отличные, но реально он ВЕЗДЕ! Куда не зайду, его курсы или прям страницы заточенные под какие-нибудь партнёрки. Я не люблю агрессивную рекламную политику, дело в том, что многие ведь рекламируют курсы в качестве партнёра, а значит, могут хоть полностью загадить ссылками статью с предложением купить какой-нибудь курс.
У Евгения Попова семейный подряд.
А у Евгения Вергуса обширный охват. Не зря он все партнёрские конкурсы выигрывает. Он знает своё дело и делает его. А то что реклама везде, так это и есть партнёрский маркетинг. 
Добрый день, Максим. помогите пожалуйста
1) Если я например удалю страницы, которые находиться в индексации. Надо ли сообщить об этом гугл и там удалить url страницы или же гугл сам автоматический удаляют их из индексаций?
2) Дело в том, что когда я захожу в разделе фонетика, фразы, топики, то не могу нажать на свежие записи, рубрики то есть сайтбар не работает . Не знаете почему?
Здравствуйте, Сауле.
Если вы удаляете страницы на своём сайте, то со временем они будут удалены из индекса поисковых систем. Сначала, при обращении робота к этим страницам будет получен ответ 404 (страница не найдена), а затем эти страницы будут исключены из индекса. Для ускорения процесса, можно в кабинетах вебмастера поисковых систем сообщить об удалении.
В сайтбаре у вас всё работает. Я проверил с нескольких браузеров. Попробуйте сбросить кэш барузера и проверить ещё раз. Или открыть сайт с другого браузера. Всё работает, вы зря волнуетесь.
Спасибо, вам Максим большое!!!!
Пожалуйста, если чего, обращайтесь!
Добрый день, Максим. Как называется ваша тема, мне нравиться, она платная или бесплатная? Если поменять тему какие проблемы можно ожидать?
Здравствуйте, Сауле. Моя тема называется Customizr. Есть бесплатная версия и платная. У меня платная версия. Смена темы подразумевает под собой доработку её под свои нужды (выбор цвета, положение блоков, удаление ссылок из подвала и так далее). Но, от этого никуда не деться, с любой темой нужно работать и доводить её под себя. Преимущество платной темы в том, что в ней 100% нет вирусов и скрытых ссылок. В остальном и бесплатную тему можно доработать до идеала.
Скажите, а при изменении давно работающего дизайна на адптивный, не стоит опасаться падения позиций в поисковика как при полной смене дизайна?
Здравствуйте, Андрей. Нет, опасаться этого не стоит. А вот на рост позиций в мобильной выдаче можно рассчитывать.
Здравствуйте, Максим! Воюю с 3-х колоночным шаблоном, два сайдбара и посередке контент. Никак не могу сделать, чтобы на мобильных и планшетах выводился первым контент, а затем уже сайдбары. У меня все время вылазит первым левый сайдбар. Сможете подсказать?
Тема выглядит так:
шапка
л-сайдбар — контент — пр-сайдбар
подвал
Мне нужно такое:
шапка
контент
сайдбар-л, пр (без разницы какой, но желательно правый, потом левый)
сайдбар-пр, левый
подвал
А получается так: шапка
сайдбар-лев
контент
сайдбар-пр
подвал
Вроде буков много, но понятно надеюсь. ))
Здравствуйте, Альберт. На своём мониторе я как раз вижу правильный вариант адаптации шаблона. Возможно вы не сбросили кэш браузера, сбросьте и посмотрите ещё раз. У меня ваш шаблон при адаптации выглядит так: шапка, слайдер, контент, сайтбары, подвал. Так что всё в порядке.
Нет, нет, Максим! С этим сайтом полный порядок. Ну, насколько возможно.) Я на Денвере сейчас мучаю другую тему, она без сетки. Называется cleanwp в вордпрессе. Я ее оттуда скачал, она 2-х колоночная адаптивная и приделал левый сайдбар. И вот беда. Да и раньше тоже было на темах с Артистера такая же беда.
Альберт, используйте ваш сайт в качестве примера. Именно так нужно сделать структуру на новом сайте. То есть в одном контейнере у вас должны располагаться сайтбары и блок с контентом. А за счёт стилей float идёт позиционирование и в дальнейшем отключение этих стилей и присвоение 100% ширины. Смотрите на ваш шаблон через панель разработчика (F12) и делайте по аналогии. Лучше, на пальцах, я не знаю как объяснить.
Тема:Vanillia
Вот так получилось, но #футер и #футер2 писал {width: 100%; height: auto;} = не помогает = Прошу помощи.
Если будете не против как закончу выставил бы весь код для данной темы
Здравствуйте, Игорь. Не получилось потому, что для всех блоков в обычном виде задан размер в пикселях, а для блока span24 нет. И получается, что при изменении экрана все блоки с пикселей переходят на проценты, а span24 так и остаётся 100% и выходит за пределы. Нужно этот момент поправить и всё будет работать. Желаю успеха!
Уже чуть разобрался, что то вышло, а что то ещё в работе — подскажите как правильно левый сайдбар при уменьшении перенести после контента, а не до него. Спасибо.
Самый простой вариант скрыть левый сайтбар при меньшем размере экрана и показать правый сайтбар с тем же контентом. Или же использовать свойства float и работать с блоками сайта. Но, это сложнее, так как структура шаблона такова, что левый сайтбар идёт выше блока с контентом.
Прошу ещё помощи по навигации
Не как не выходит сократить в несколько этажей — Алфавитный перечень:
.span-24, .navcontainer {
width: 100%;
border: 0;
height: auto;
}
всё уменьшается, а остаётся поиск, алфовитный поиск и футер
Та же самая тема блоки с классом .span-24 имею размер 950px, но при смене размеров не перестраивается в проценты. Перевод в пиксели это первый шаг, теперь для тех же классов нужно сделать перевод в пиксели, но в медиазапросах.
Совсем запутался
Сначала надо перевести класс с px в % = это делается обращением к классу:
и это прописываем в блоке:
@media only screen and (max-width: 760px){
.span-24 {width: 100%;}
}
А Вы пишете, что надо перевести опять в пиксели , но почему то он не уменьшается при прохождении 760 px — видимо я что то напортачил или много где есть этот класс?
Был бы признателен за подсказку кодом. Спасибо
Игорь, изначально, в нормальном виде, все блоки должны иметь ширину в РХ. А уже в медиазапросах эту величину нужно перевести в %. Посмотрите на другие блоки, у них ведь есть ширина в пикселях и в медиазапросах этим же классам присвоена ширина в процентах. Вы слишком много добавили лишних стилей. Для исправления ситуации сделайте вот что:
В медиазапросе
@media only screen and (max-width: 760px)уберите следующие стили:#header {width:100%; height:auto;}#footer {width:100%;}
#footer2 {width:100%;}
div.span-24 {height:auto;}
.navcontainer {width:100%;}
.container {height:auto;}
И добавьте эти:
.span-14 {width:100%;}Желаю успехов!
С Вашего разрешения публикую мобильную вёрстку для темы Vanillia : (был бы признателен если допилите, что я упустил)
@media only screen and (max-width: 760px){#search, #contentwrap, #nav, #pagemenu, #searchform {width: 100%; height: auto;}
#content{width: 95%;}
#topsearch.span-6.last {width: 100%; height: auto; float: none;}
#nav {display: inline-block;}
.span-24, .span-18 {width: 100%; border: 0;}
.navcontainer{font-size: 3em; background-color: #B11834; border: 0; height: auto; background: none;}
div.span-24{width: 100%; height: auto;}
.container {width: 100%;}
.span-5 {display: none;}
#footer2 {border: 0;}
#footer {border: 0;}
.span-14, .span-13 {width:100%;}
.vvv {background-color: #B11834;}
#header h1 a, #header h1 a:visited { font-size: 0.5em;}
}
Игорь, добрый день. Спасибо, что поделились. Подредактировал стили и дополнил .span-13, так как из-за того что этот блок не был адаптирован, сохранялась горизонтальная прокрутка. Теперь всё отлично. Может кому и пригодится. Удачи!
Попробовал — действительно спан 13 нужен — пускай пользуются люди )
Тема нужная, даже современные шаблоны не все адаптируют три колонки. Максим, но я хотел бы задать другой вопрос. На моем сайте, при просмотре через браузер, русский текст отображается нормально. А когда заходишь с мобильного на андроиде, русский текст расплывается по всей ширине блока с текстом. Дадите совет как можно это исправить?
Здравствуйте, Андрей. Посмотрите стили в медиазапросах. Скорее всего, они будут в конце файла style.css. Нужно искать причину там. Так как они регулируют вид на мобильных устройствах. Что конкретно смотреть не скажу, так как это нужно смотреть в коде. Но, направление вы знаете, а найдёте причину. Удачи!
Радовался темой своей Vanillia, но появилась необходимость добавить сайдбары. Добавил:
.span-5, .span-5.last { float: none; display:block; padding: 5px; margin: 5px; width: 95%; }
Но почему то даже без трансформации показывает на всю ширину, но вопрос в другом — почему сначала показывается сайдбар, а не снизу — я же добавил его в конце?
Подскажите, что лучше сделать: старый шаблон адаптировать под мобильные или просто поставить новый шаблон схожей структуры уже с адаптивной версткой?