Контент на всю ширину экрана в адаптивной версии

12
Seredniy
На сайте с 17.03.2008
Offline
251
981

Добрый день, уважаемые специалисты. Я в ступоре, ибо не могу понять как работает адаптивность на моем сайте.

Итак, что я делаю

В хедере есть следующее:

<meta name="viewport" content="width=device-width, maximum-scale=1.0">

В медиа-запросах прописал такое:

@media only screen and (max-width : 992px) {

#sidebar {
display: none;
}

#wrapper {
width: 98%;
}

#content {
float: none;
width: 100%;
}

}

Т.е. я скрываю сайдбар на маленьких мониторах, а ширину основного контейнера и ширину контента делаю на весь экран. Чтобы было удобно пользователю читать сам контент.

В чем же проблема?

Проблема заключается в том, что при таком раскладе все работает как надо, а сам контент растянут на 100%, но его плохо видно, т.е. для того, чтобы его посмотреть нужно увеличивать вручную на телефоне.

Вот как выглядит и как хотелось бы:

Wordpress и другие CMS: правки, настройка, верстка и натяжка шаблонов, разработка сайтов "под ключ" (/ru/forum/1008050)
LovelAss
На сайте с 05.06.2009
Offline
96
#1

Попробуйте так


<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
Seredniy
На сайте с 17.03.2008
Offline
251
#2

LovelAss, увы, не работает

Ragnarok
На сайте с 25.06.2010
Offline
208
#3

Seredniy, есть мысль что у Вас что-то растягивает

для проверки, попробуйте добавить в css @media only screen and (max-width : 992px) {

* {

max-width: 100%;

}

}

//TODO: перестать откладывать на потом
Seredniy
На сайте с 17.03.2008
Offline
251
#4

Ragnarok, тоже не помогло, увы. Я уже даже не знаю, куда рыть...

M
На сайте с 18.05.2009
Offline
108
#5

а что мешает увеличить шрифт?

totamon
На сайте с 12.05.2007
Offline
360
#6
Seredniy:
Я в ступоре, ибо не могу понять как работает адаптивность на моем сайте.

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

Хостинг от 90р ( https://goo.gl/h1VRkY ) и ВПС от 161р ( https://goo.gl/vw9JH7 ) 14 дней бесплатный тест! Лучшие ВПС, ТП огонь, все страны! https://8fn.ru/inferno ХОСТИНГ №1 РОССИИ https://8fn.ru/beget Монетизация любых сайтов PUSHами ( https://8fn.ru/push ) - лучшая цена клика и показа ;)
DarkSpirit
На сайте с 08.11.2008
Offline
96
#7

скиньте юрл, что бы просмотреть на примере.

romantictourism.in.ua (romantictourism.in.ua)
D.iK.iJ
На сайте с 26.05.2013
Offline
184
#8

Да, без URL не подсказать. Очень похоже, что у вас просто в дополнение к #wrapper где-то еще есть фиксированная ширина. Ну и в теме (в подписи) есть примере вполне универсального скрипта для картинок и прочих блоков. Можете потестить.

Адаптивный дизайн в 2 строчки ( https://dikij.com/wm/adaptaciya-saytov.php ). + Принимаю заказы любой сложности ( https://searchengines.guru/ru/forum/926323 ). 💎 Еще я делаю классные кулоны с опалами ( https://mosaicopal.ru/ ).
melkozaur
На сайте с 06.04.2010
Offline
496
#9

Шрифты увеличить, картинкам убрать float и располагать над/под текстом. Разве это не очевидно?

Серверы в NL/US со скидкой 30% нашим читателям: E5-2650v4/10GB DDR4/240GB SSD/1 Gbps - от $20: https://ua-hosting.company/vps/nl SEO без компромиссов: https://seoleaks.net SEOLEAKS - продвижение сайтов: https://www.instagram.com/seoleaks
oux
На сайте с 07.02.2010
Offline
83
oux
#10

Для body задайте min-width например 300px

12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий