- Поисковые системы
- Практика оптимизации
- Трафик для сайтов
- Монетизация сайтов
- Сайтостроение
- Социальный Маркетинг
- Общение профессионалов
- Биржа и продажа
- Финансовые объявления
- Работа на постоянной основе
- Сайты - покупка, продажа
- Соцсети: страницы, группы, приложения
- Сайты без доменов
- Трафик, тизерная и баннерная реклама
- Продажа, оценка, регистрация доменов
- Ссылки - обмен, покупка, продажа
- Программы и скрипты
- Размещение статей
- Инфопродукты
- Прочие цифровые товары
- Работа и услуги для вебмастера
- Оптимизация, продвижение и аудит
- Ведение рекламных кампаний
- Услуги в области SMM
- Программирование
- Администрирование серверов и сайтов
- Прокси, ВПН, анонимайзеры, IP
- Платное обучение, вебинары
- Регистрация в каталогах
- Копирайтинг, переводы
- Дизайн
- Usability: консультации и аудит
- Изготовление сайтов
- Наполнение сайтов
- Прочие услуги
- Не про работу
Что делать, если ваша email-рассылка попала в спам
10 распространенных причин и решений
Екатерина Ткаченко
Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий
Есть старая тема ВП.
До новой обновить не выйдет по ряду причин.
Нужно подсредством viewport основную часть делать в размер экрана мобильного.
А правый сайдбар как то чтобы не справа для мобильных висел (появляется горизонтальная прокрутка), а уходил вниз под основную часть.
Подключить тег, подключить стили. Допустим, так.
<link rel="stylesheet" href="/adaptive.css" type="text/css">
Дальше обычно начинаю с заготовки:
img {max-width: 100% !important; height: auto !important; box-sizing: border-box;}
iframe, textarea, input, button, submit, select, video, object, embed {max-width: 100% !important; box-sizing: border-box;}
table, span, div, ins {max-width: 100% !important;}
}
@media screen and (max-width: 775px) {
}
@media screen and (max-width: 500px) {
//td, th {word-break: break-word; -moz-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;}
}
Ну и дальше тыкайте правой кнопкой => Просмотреть код или по [F12] и смотрите - что мешает сайту сжиматься. Советую сразу глянуть боди - минимальная ширина вдруг есть. И убрать отступы и float у колонки и контента.
А дальше хедер, футер, контент и проверить минимум в Хроме и Сафари десктопном - как уменьшаются страницы при уменьшении ширины окна браузера.
---------- Добавлено 20.09.2017 в 17:47 ----------
Да, если не повезло и правая колонка в коде выше контента, вот скрипт для меню. Там чистый Джаваскрипт и CSS
http://dikij.com/4italka/adaptive-javascript-menu.html
у меня правая колонка перекрывает основной контент
хотя нет
точнее блоки адсенса и карта яндекс.карт не уменьшаются и перекрывают правую колонку
короче
выход - убрать ее (правую колонку) вниз - для мобильных выводить после основного контента
и задать минимальную ширину - чтобы была карта видна
стилями это реально? как?
Стилями - это без проблем обычно. Или с проблемами, но тоже возможно. Тут от верстки зависит ))
добавил только <meta name="viewport" content="width=device-width, initial-scale=1">
стало все большим
нужно немного уменьшить все
как это сделать стилями?
как это сделать стилями?
А все остальное я для кого писал? )))
Не помагает
img {max-width: 100% !important; height: auto !important; box-sizing: border-box;}
iframe, textarea, input, button, submit, select, video, object, embed {max-width: 100% !important; box-sizing: border-box;}
table, span, div, ins {max-width: 100% !important;}
}
@media screen and (max-width: 775px) {
}
@media screen and (max-width: 500px) {
//td, th {word-break: break-word; -moz-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;}
}
п/с в ставил в style.css в самом начале
не зависимо есть ли это в стиля или нет - ничего не меняется
реакция есть только на
не могу понять почему
Потому что
А эти стили без мета тега работать не будут точно.
И это все легко смотреть в Хроме, просто уменьшив ширину окна браузера.
DiKiJ, я немного сам запутался и наверное запутал Вас
1. убрал мета тег и стили - сайт как на ПК, только на смартфоне он очень мелкий
2. добавил мета тег и стили - все большое, больше чем надо
3. добавил только мета тег - все большое, больше чем надо
п.с. проверяю через личный телефон (Экран (4.5", TFT, 854x480))
основной контент
margin: 0 auto;
width: 640px;
}
колонка
float: right;
margin-left: 24px;
margin-right: 0;
text-align: left;
width: 33%;
}
---------- Добавлено 22.09.2017 в 14:35 ----------
width: 640px; это не минимальная?
float: right;
margin-left: 24px;
float: right; убрать?
margin-left: 0px;
сейчас попробую
---------- Добавлено 22.09.2017 в 14:46 ----------
попробовал - ничего
ф12->моб. режим и реальный просмотр на телефоне - две разных мира
ф12->моб. режим и реальный просмотр на телефоне - две разных мира
Зато если просто уменьшить ширину окна браузера - будет 1 в 1 примерно.
В общем, лучше пришлите сразу адреса домена. Так просто не помогу.