1

Тема: Горизонтальная прокрутка

Добрый день. Помогите найти, что мешает сайту вместится в мобильную версию? Подскажите, как в мобильной версии избавиться от горизонтальной прокрутки? Сайт: https://tovarniygid.ru/

2

Re: Горизонтальная прокрутка

Банеры мешают :-)

Есть несколько вариантов решения:
- прятать их на мобильном. Не лучшее решение
- Обрезать в css
- Получить коды банеров для разных разрешений экранов и показывать нужный

3

Re: Горизонтальная прокрутка

japanes пишет:

- Обрезать в css
- Получить коды банеров для разных разрешений экранов и показывать нужный

Спасибо за ответ, а подскажите пожалуйста, как это сделать, а то я тока учусь?

4

Re: Горизонтальная прокрутка

Как у вас сейчас вставлены эти баннеры? Скорее всего через javascript код. В таком случае получить код, который сам будет подстраиваться под размеры экрана - это в настройках банеро крутилки по идее можно сделать. Если нет, то получите прото 2 разных кода и используйте css media query для их отображения:

<div class="big-banner"><!-- Код баннера --></div>
<div class="mobile-banner"><!-- Код другого баннера --></div>

<style>
.big-banner {
    max-width: 100%; /* устанавливаем максимальную ширину контейнера с банером */
    overflow: hidden; /* говорим, что всё, что больше ширины контейнера мы обрезаем */
}
.mobile-banner {
    max-width: 100%; /* устанавливаем максимальную ширину контейнера с банером */
    overflow: hidden; /* говорим, что всё, что больше ширины контейнера мы обрезаем */
    display: none; /* скрываем отображение банера для мобильных */
}

/* "1000px" заменить на ширину экрана, при которой ещё не появилась прокрутка */
@media screen and (max-width: 1000px) {
    .big-banner {
        display: none; /*скрываем отображение банера для мониторов */
    }
    .mobile-banner {
        display: block; /* показываем банер для мобильных */
    }
}
</style>