Отключен JavaScript

У вас отключен JavaScript. Некоторые возможности системы не будут работать. Пожалуйста, включите JavaScript для получения доступа ко всем функциям.

0

Вопрос По Виджетам В Десктоп И Мобильной Версии

Автор 57P, 13 янв. 2017 22:32

Авторизуйтесь для ответа в теме

Сообщений в теме: 4

#1 57P

Активный участник

Пользователи
331 сообщений

Отправлено 13 Январь 2017 - 22:32

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

<!-- Put this script tag to the <head> of your page -->
<script type="text/javascript" src="//vk.com/js/api/openapi.js?136"></script>
<script type="text/javascript">
VK.init({apiId: 1111111, onlyWidgets: true});
</script>
<!-- Put this div tag to the place, where the Comments block will be -->
<div id="vk_comments"></div>
<script type="text/javascript">
VK.Widgets.Comments("vk_comments", {limit: 10, width: "665", attach: "photo,video"});
</script>

	 <iframe src="//widget.stapico.ru/?q=1111111&s=200&w=3&h=2&b=1&p=2&effect=2" allowtransparency="true" frameborder="0" scrolling="no" style="border:none;overflow:hidden;width:656px; height: 569px" ></iframe> <!-- stapico - stapico.ru -->

и для мобильной версии

<!-- Put this script tag to the <head> of your page -->
<script type="text/javascript" src="//vk.com/js/api/openapi.js?136"></script>
<script type="text/javascript">
VK.init({apiId: 5798351, onlyWidgets: true});
</script>
<!-- Put this div tag to the place, where the Comments block will be -->
<div id="vk_comments"></div>
<script type="text/javascript">
VK.Widgets.Comments("vk_comments", {limit: 10, width: "344", attach: "photo,video"});
</script>

	 <iframe src="//widget.stapico.ru/?q=1111111&s=150&w=2&h=3&b=1&p=2&effect=0" allowtransparency="true" frameborder="0" scrolling="no" style="border:none;overflow:hidden;width:344px; height: 631px" ></iframe> <!-- stapico - stapico.ru -->

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

Наверх

#2 Vaccina

Активный участник

Модераторы
24 353 сообщений

Отправлено 14 Январь 2017 - 05:03

Здравствуйте.

Через стили можно скрыть виджеты под определенным разрешением экрана. Уточните пожалуйста, где у вас они установлены на витрине?

Наверх

#3 57P

Активный участник

Пользователи
331 сообщений

Отправлено 14 Январь 2017 - 14:27

Vaccina (14 Январь 2017 - 05:03) писал:

Здравствуйте.

Через стили можно скрыть виджеты под определенным разрешением экрана. Уточните пожалуйста, где у вас они установлены на витрине?

Редактор шаблонов - товар строка 583 Десктоп и 584 моб

Редактор шаблонов - просмотр новости строка 124 Десктоп и 125 моб

Наверх

#4 57P

Активный участник

Пользователи
331 сообщений

Отправлено 16 Январь 2017 - 22:50

up

Наверх

#5 Firefly

Активный участник

Модераторы
3 810 сообщений

Отправлено 17 Январь 2017 - 10:06

57P (14 Январь 2017 - 14:27) писал:

Редактор шаблонов - товар строка 583 Десктоп и 584 моб

Редактор шаблонов - просмотр новости строка 124 Десктоп и 125 моб

Здравствуйте.
В шаблоне main.css добавил Вам код:

.widget-desc {display:none;}

И код:

@media all and (min-width: 642px) {
.widget-mob {display:none;}
}

Коды виджетов обернул в соответствующие блоки с классами widget-desc и widget-mob в шаблонах Просмотр новости и шаблон Товар.
Проверьте, пожалуйста, результат.