Как я разместил широкую таблицу в мобильную версию сайта на WordPress

Для широких страниц я так и не нашел плагин на WordPress, а хотелось бы, чтобы широкая страница свайпом перемещалась по горизонтали.
Такие методы использует плагин “SiteOrigin Сборник Виджетов” для отображения товара в одну строку, но у нас широкая табличка.

Простой одной строчкой css и блоком div в верстке странички можно это сделать:

Создаем <DIV> и в него помещаем нашу <TABLE>.

В CSS прописываем

overflow: auto;

и -вуаля! Таблица теперь перемещается и свайпом влево-вправо можно ее перетаскивать, при этом сам сайт не растягивается.

Есть еще один нюанс – плавность на некоторых браузерах при горизонтальном скролле не присутствует, и чтобы все было гладко, в CSS прописываем так:

overflow: auto;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;

В плагине SiteOrigin прописано более подробно, я не вникал что это и зачем, но покажу:

overflow: auto;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;

-webkit-touch-callout: none;
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
user-select: none;

Все прекрасно заработало, но потом у меня появилась ошибка в вебмастере Google https://search.google.com/search-console/mobile-usability

Начал ругаться он на:

  • Слишком мелкий шрифт
  • Интерактивные элементы расположены слишком близко
  • Контент шире экрана

И даже, если проверить на https://search.google.com/test/mobile-friendly , там тоже ругается, и отображается в превьюшке сайт криво, хотя я лично свой сайт тестировал – у меня все норм.

но об этом в следующей записи 🙂

Оставьте комментарий