Добрый день, уважаемые специалисты. Я в ступоре, ибо не могу понять как работает адаптивность на моем сайте.
Итак, что я делаю:
В хедере есть следующее:
<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%, но его плохо видно, т.е. для того, чтобы его посмотреть нужно увеличивать вручную на телефоне.
Вот как выглядит и как хотелось бы:
Я понимаю, что это не совсем адаптив и не претендую, просто хоть немного сделать удобнее сайт для пользователей хочу.
Понимаю, что решение на поверхности, но не вижу его. Спасите!