Тема: Горизонтальная прокрутка
Добрый день. Помогите найти, что мешает сайту вместится в мобильную версию? Подскажите, как в мобильной версии избавиться от горизонтальной прокрутки? Сайт: https://tovarniygid.ru/
- japanes
- Клуб WordPress
- Неактивен
Re: Горизонтальная прокрутка
Банеры мешают :-)
Есть несколько вариантов решения:
- прятать их на мобильном. Не лучшее решение
- Обрезать в css
- Получить коды банеров для разных разрешений экранов и показывать нужный
Re: Горизонтальная прокрутка
japanes пишет:
- Обрезать в css
- Получить коды банеров для разных разрешений экранов и показывать нужный
Спасибо за ответ, а подскажите пожалуйста, как это сделать, а то я тока учусь?
- japanes
- Клуб WordPress
- Неактивен
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>