Пользовательский CSS на мобильных устройствах

Содержание

Вопрос или проблема
Ответ или решение
Проблема
Решение
Заключение

Вопрос или проблема

Я хотел бы задать вам вопросы.
Уже настроил пользовательский CSS для мобильных устройств

    @media only screen and (min-device-width: 601px) and (max-device-width: 736px) 
@media only screen and (min-device-width: 300px) and (max-device-width: 600px)
@media only screen and (min-device-width: 300px) and (max-device-width: 600px)

Все работает правильно на постах и страницах. Но когда я нахожусь на главной странице, если я перемещаю палец вправо, страница прокручивается вправо. Я хочу, чтобы она была статической, как на страницах и постах. Можете помочь мне, пожалуйста?

Страница anypredictions.com

попробуйте добавить overflow:hidden к .wrap

@media only screen and (max-width: 767px)
#wrap {
    width: 100% !important;
    overflow: hidden;
}

Это просто означает, что у вас есть элемент, нарушающий ограничения ширины экрана; я сталкиваюсь с этой проблемой каждые несколько сайтов, которые создаю. Начните с проверки фиксированных или абсолютно позиционированных элементов. Затем обратите внимание на элементы, для которых вы могли задать фиксированное значение ширины в пикселях. Если это не сработает, я обычно открываю инструменты разработчика и навожу курсор на элементы в коде, чтобы увидеть их вычисленную ширину. Последний вариант — в начале вашего CSS файла добавьте:

html *{border:1px solid #000;}

Это добавит черную границу вокруг каждого элемента. Затем найдите тот, который выходит за правую границу экрана, и отрегулируйте, что нужно изменить.

Обновление:

Я только что сам проверил свой ответ, сделал так, чтобы у каждого элемента была розовая граница, и честно говоря, похоже, что это часть проблемы:

.vc_row{
  margin-right:-15px;
  margin-left:-15px;
}

У вас есть куча div-тегов, выглядящих так:

<div class="vc_row wpb_row vc_row-fluid vc_custom_1590328177632 vc_row-o-equal-height vc_row-o-content-middle vc_row-flex">

И они все нарушают ограничения страницы. Не только на мобильных устройствах, но даже на десктопах. Возможно, стоит обратиться к команде разработчиков OceanWP или людям из WPBakery и узнать, могут ли они помочь. С этими конструкторами страниц и сторонними темами вы создаете свой сайт, переключая настройки здесь и там, и быстро теряете из виду, где вы установили что-то, что может иметь каскадный эффект на всей странице.

Ответ или решение

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

Проблема

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

Решение

Исследование проблемных элементов:
- Как было упомянуто, возможно, что определённые элементы на странице имеют фиксированные или абсолютные позиции, либо заданные ширины в фиксированных пикселах, что нарушает общую структуру.
- Используйте инструменты разработчика, чтобы проверить ширину элементов на главной странице и найти те, которые превышают пределы экрана.
Исправление CSS:
- Добавьте стиль overflow: hidden; к контейнеру, как вы это сделали для элемента #wrap:
```
@media only screen and (max-width: 767px) {
 #wrap {
     width: 100% !important;
     overflow: hidden;
 }
}
```
- Посмотрите на CSS для элементов с классом .vc_row, которые могут иметь отрицательные отступы. Убедитесь, что их стили не затрагивают общий стиль страницы:
```
.vc_row {
margin-right: 0;
margin-left: 0;
}
```
Диагностика с помощью визуальных инструментов:
- Добавьте временные границы для визуализации каждого элемента с помощью следующего кода:
```
html * {border: 1px solid #000;}
```
- Это поможет вам быстро определить элементы, выходящие за пределы экрана, и внести необходимые изменения.
Обращение к разработчикам темы или плагина:
- Если проблема вызывает серьезные затруднения и связана с используемой темой или плагинами, такими как OceanWP или WPBakery, лучше всего обратиться прямо к их команде поддержки. Возможно, они смогут предложить дополнительные решения или исправления для вашего случая.

Заключение

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