Содержание
Блок «Поделиться», представленный компанией Яндекс, входит в состав многочисленных технологических решений, помогающий вебмастерам улучшить функциональность своих сайтов.
Суть проста – блок, установленный на сайте, помогает посетителям быстро поделиться понравившейся страницей в личном кабинете социальной сети или блоге.
С помощью конструктора можно выбрать нужные соц. сети, задать размер иконок и внешний вид. После чего скопировать полученный код и вставить в шаблон своего сайта. Дополнительные параметры настройки представлены в документации.
Отличный и удобный сервис, казалось бы, не имеет недостатков, но, как минимум, одну ошибку найти удалось. В итоге, настройка каскадных таблиц стилей (CSS) даст нам нужный результат.
Как решить ошибку с размером элементов для мобильных устройств?
При проверке сайта каким-либо сервисом (допустим PR-CY), в категории “Мобильность”, графе “Адаптивность для мобильных устройств” мы можем увидеть ошибку в пункте “Размер элементов”, при этом имея современный ресурс, полностью подстраивающийся под разрешения пользователя.
Проблемой может служить как раз тот самый блок «Поделиться», у которого расстояние между иконками явно недостаточное, чтобы удовлетворить анализ различных систем.
В этом случае зададим стандартному свойству следующие правила:
.ya-share2__item {
padding-right: 2px;
}
Если с остальными элементами у вас все в порядке, то при следующей проверке получим более оптимистичное сообщение.
Как добавить свой текст перед кнопками?
Чтобы посетители вашего сайта не спутали возможность поделиться страницей с группами в социальных сетях, уместно будет добавить поясняющий текст перед кнопками. Визуальное восприятие и внешний вид, как по мне, станут только лучше.
Сделать это можно с помощью стилей:
.ya-share2__list::before {
content: 'Поделиться \203A ';
position: relative;
top: 2px;
margin-right: 6px;
color: #aab2bd;
}
Конечно же, текст может быть любым, как и его цвет, размер, отступы.
1,411 total views, 2 views today
Загрузка...
