Убрать горизонтальную прогрутку

[alexburn]

Приветствую, ребята! Подскажите пожалуйста, как убрать горизонтальную прокрутку при просмотре на мобильных?
Пользуюсь отладчиком FireBug, выбираю просмотр на мобильном, но что-то никак не могу найти.
Вот пациент:
[spoiler]pro-coder.ru[/spoiler]
Добавлено: 29-10-2016, 14:14:27

можно конечно использовать свойство

overflow-x: hidden;

но это только убирает скролл-бар, но это немного не то

[Fullf]

Как-то так...

Меняем это

Код Выделить Развернуть


.uk-container {
    padding: 0 5px !important;
}

.tm-navbar {
    border-width: 0 0 1px;
    margin: 0 -25px 25px;
}


На это

Код Выделить Развернуть


.tm-navbar {
    border-width: 0 0 1px;
    margin: 0;
}

.uk-container {
    padding: 0 !important;
}

В медиа запросе на мобильный размер

[alexburn]

Нее, к сожалению не помогло , там походу вообще нужно много чего перепиливать

[Fullf]

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

[alexburn]

Я изменил только:

Код Выделить Развернуть


.tm-navbar {
        border-width: 0 0 1px 0;
    }
В отладчике смотрю - не изменилось. Запустил в яндексе - показал что нет прокрутки. Может с кэшем что-то
Добавлено: 29-10-2016, 16:28:18

Если трогаю .uk-container - шаблон начинает не так отображаться. Нет отступа от краев

[Fullf]

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

ctrl+f5

[alexburn]

Я уже понял , поменял только в одном месте, .uk-container не трогал

[Fullf]

Да нее, прокрутка все же осталась. Замените весь код с моего примера.

[alexburn]

Если меняю в .uk-container  отступы, тогда не очень смотрится. Гугл и Яша не ворчат , так оставлю

[inkanus.gray]

В современных мобильных браузерах страницы отображаются не 1:1, а с масштабированием. Регулируется масштабирование мета-тегом viewport.

Есть два варианта:
1. Фиксированная ширина для мобильных. В шапку страницы вставляется тег:

Код Выделить Развернуть

<meta name="viewport" content="width=980px">
В метатеге указывается та ширина, на которую рассчитан дизайн (чтобы не было горизонтальной прокрутки все элементы не должны превышать указанную ширину).

2. Адаптивная ширина для мобильных:

Код Выделить Развернуть

<meta name="viewport" content="width=device-width">
Браузер сам сориентируется, но могут быть проблемы с элементами, у которых указана ширина 100% (они в мобильном браузере будут не по ширине viewport, а по физической ширине экрана при начальном масштабе). Для таких элементов дополнительно придётся указать min-width.