Режим "нравится" "не нравится" в мобильной версии сайта

[mobirobi 6]

Здравствуйте, следующая проблема, нравится как реализовано в дефолтном шаблоне DLE режим "нравится" "не нравится".

 

Сделать это с полной версией сайта труда не составило, добавил в полной и краткой новости код

[rating-type-4]
					<div class="rate_like-dislike">
						<span class="ratingtypeplusminus ignore-select ratingplus">{likes}</span>
						[rating-plus]<span title="Нравится"><svg class="icon icon-like"><use xlink:href="#icon-like"></use></svg></span>[/rating-plus]
						<span class="ratingtypeplusminus ratingminus ignore-select">{dislikes}</span>
						[rating-minus]<span title="Не нравится"><svg class="icon icon-dislike"><use xlink:href="#icon-dislike"></use></svg></span>[/rating-minus]
					</div>
					[/rating-type-4]

потом подключил svg в main.tpl

 

<script type="text/javascript">
        jQuery(function($){
            $.get("{THEME}/images/sprite.svg", function(data) {
              var div = document.createElement("div");
              div.innerHTML = new XMLSerializer().serializeToString(data.documentElement);
              document.body.insertBefore(div, document.body.childNodes[0]);
            });
        });
    </script>

и добавил стили в styles.css

 

		.rate_like > a, .rate_like-dislike {
			float: left;
			height: 22px; line-height: 22px;
			padding: 6px 12px;
			border: 1px solid #eaeaea;
			border-radius: 18px;
			text-decoration: none !important;
			font-weight: bold;
			color: #919191;
			-webkit-transition: all ease .2s; transition: all ease .2s;
		}
		.rate_like > a:hover { border-color: #3394e6; color: #3394e6; }
		.rate_like .icon { width: 16px; height: 15px; margin: -.2em .3em 0 0; }

		.rate_like-dislike > a {
			display: inline-block;
			width: 22px; height: 22px;
			text-align: center;
		}
		.rate_like-dislike > a .icon {
			width: 14px; height: 15px;
			fill: #787878;
			vertical-align: middle;
			margin: -.3em 0 0 0;
		}
		.rate_like-dislike > a:hover .icon { fill: #3394e6; }
		.rate_like-dislike .ratingplus { color: #88c54d; }
		.rate_like-dislike .ratingminus { color: #e45757; }
		.rate_like-dislike > span { cursor: default; margin: 0 .3em; }
.after_rate {margin: 2 0 0 0;}

а в  engine.css добавил

 

.ratingzero {
  color: #6c838e;
}

.ratingtypeplusminus {
  padding: 0px 5px;
}

.ratingtypeplus {
  color: #6c838e;
  padding: 0px 0px 0px 5px;
}

.ratingplus {
  color: green;
}

.ratingminus {
  color: red;
}

 

в полной версии все работает замечательно, ниже скриншот

то в мобильной версии при всех подобных манипуляциях со стандартным шаблоном DLE для смартфонов  smartphone получаю вот такое на четверть сайта, вместо аккуратной кнопки.

 

 

Как сделать нормально? Возможно что-то упустил - хотя пересмотрел уже все - за основу взят шаблон Default в DLE. Странно что этот номер прошел с моей родной темой, а с дефолтной темой  smartphone нет. Спасибо.

 

 

[odys 385]

1 час назад, mobirobi сказал:

Как сделать нормально?

смотри стили, что-то не то, возможно дублируются

 

[mobirobi 6]

да уже думал над этим, уже второй день подряд думаю, что не так... Взят код из шаблона Default поставлен в шаблон smartphone - с виду все правильно, на дубли проверял поиском, не находит ничего похожего, все подключено одинаково на родном шаблоне, он писался очень давно на <div> когда у ДЛЕ еще была табличная верстка в демонстрационных шаблонах (и мобильного трафика столько не было, как сейчас) - и на нём всё ОК. Вообще в версии  smartphone в ДЛЕ 13.2 - по умолчанию не работает половина функций которые напридумывали с версии этак с 10, если не раньше. Её толком не обновляют, хотя сейчас с мобильных устройств посетителей больше чем со стационарных компьютеров - почти у каждого есть смартфон, а то и 2 или планшет... За то в последней версии 3 новых дизайна для стационарного компа, по которым можно понять что и как должно работать, а как применить это к мобильной версии без особых знаний может быть сложновато)))