Перейти к содержимому


Как Адаптировать Виджет Вк

вк виджет

  • Авторизуйтесь для ответа в теме
Сообщений в теме: 17

#1 Sea Wolf

Sea Wolf

    Пользователь

  • Пользователи
  • PipPip
  • 23 сообщений

Отправлено 21 Ноябрь 2014 - 22:02

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

Прикрепленные изображения

  • V5i6dg1ss28.jpg


#2 Sea Wolf

Sea Wolf

    Пользователь

  • Пользователи
  • PipPip
  • 23 сообщений

Отправлено 22 Ноябрь 2014 - 15:09

Будут рад если ответите :rolleyes:

#3 RayLi

RayLi

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

  • Модераторы
  • 2 857 сообщений

Отправлено 22 Ноябрь 2014 - 16:17

Просмотр сообщенияProgressFit (22 Ноябрь 2014 - 15:09) писал:

Будут рад если ответите :rolleyes:
Здравствуйте.
Попробуйте сделать следующее:
В шаблоне style.css добавьте следующий код:
div#vk_groups iframe {
width: 100%;
}
Так же в шаблон html найдите код:
<div id="vk_groups"></div>
И замените его:
<div id="vk_groups" style="width: 100%;"></div>


#4 Sea Wolf

Sea Wolf

    Пользователь

  • Пользователи
  • PipPip
  • 23 сообщений

Отправлено 23 Ноябрь 2014 - 12:10

Добавил, что-то все равно не работает. Что еще можно сделать? Может я не правильно вставил?

#5 Danil

Danil

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

  • Модераторы
  • 4 645 сообщений

Отправлено 23 Ноябрь 2014 - 12:11

Просмотр сообщенияProgressFit (23 Ноябрь 2014 - 12:10) писал:

Добавил, что-то все равно не работает. Что еще можно сделать? Может я не правильно вставил?
В шаблоне html найдите код
<div id="vk_groups" style="width: 100%;"></div>
и замените на
<div id="vk_groups" style="width: 100% !important;"></div>


#6 Sea Wolf

Sea Wolf

    Пользователь

  • Пользователи
  • PipPip
  • 23 сообщений

Отправлено 23 Ноябрь 2014 - 12:59

В моб. версии все равно вылазиет виджет как фото.

#7 Danil

Danil

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

  • Модераторы
  • 4 645 сообщений

Отправлено 23 Ноябрь 2014 - 13:55

Просмотр сообщенияProgressFit (23 Ноябрь 2014 - 12:59) писал:

В моб. версии все равно вылазиет виджет как фото.
Вам, нужно чтобы виджет имел одинаковую ширину, при различных разрешениях?
Если да, то в шаблоне html найдите
<div id="vk_groups" style="width: 100% !important;"></div>
и измените 100%, например на 150px или какое нибудь свое значение.

#8 Sea Wolf

Sea Wolf

    Пользователь

  • Пользователи
  • PipPip
  • 23 сообщений

Отправлено 23 Ноябрь 2014 - 14:10

Хотелось бы, чтобы в моб. версии, на разных устройствах, виджет имел такую ширину, чтобы не заходил на другую часть сайта. Тоесть чтобы виджет менял свою ширину в зависимости от устройства, как например картинка  "купить прямо сейчас" на главной странице сайта. Извиняюсь, если не правильно сформулировал.

#9 Dars

Dars

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

  • Модератоpы
  • 1 410 сообщений

Отправлено 23 Ноябрь 2014 - 14:15

Просмотр сообщенияProgressFit (23 Ноябрь 2014 - 14:10) писал:

Хотелось бы, чтобы в моб. версии, на разных устройствах, виджет имел такую ширину, чтобы не заходил на другую часть сайта. Тоесть чтобы виджет менял свою ширину в зависимости от устройства, как например картинка  "купить прямо сейчас" на главной странице сайта. Извиняюсь, если не правильно сформулировал.
На данный момент так и есть. Очистите кэш (Ctrl+F5), если у вас это не так.

#10 Sea Wolf

Sea Wolf

    Пользователь

  • Пользователи
  • PipPip
  • 23 сообщений

Отправлено 23 Ноябрь 2014 - 14:31

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

#11 Sea Wolf

Sea Wolf

    Пользователь

  • Пользователи
  • PipPip
  • 23 сообщений

Отправлено 23 Ноябрь 2014 - 14:38

Например на пк - смотриться как надо, а на планшете и мобильном - нет.
Вот как смотриться с айпеда.

Прикрепленные изображения

  • JMyKhmPri5A.jpg


#12 Vaccina

Vaccina

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

  • Модераторы
  • 23 716 сообщений

Отправлено 25 Ноябрь 2014 - 03:44

В style.css попробуйте прописать:
#vk_groups {
	width: 100% !important;
}


#13 Sea Wolf

Sea Wolf

    Пользователь

  • Пользователи
  • PipPip
  • 23 сообщений

Отправлено 25 Ноябрь 2014 - 16:12

Не помогло. Куда этот виджет можно прикрепить вообще, чтобы было все нормально?

#14 Ирина345

Ирина345

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

  • Модераторы
  • 5 673 сообщений

Отправлено 25 Ноябрь 2014 - 21:54

Просмотр сообщенияProgressFit (25 Ноябрь 2014 - 16:12) писал:

Не помогло. Куда этот виджет можно прикрепить вообще, чтобы было все нормально?
Здравствуйте, попробуйте такой вариант найдите в HTMl код
@media only screen and (min-width: 768px) and (max-width: 959px) {
замените на


@media only screen and (min-width: 768px) and (max-width: 959px) {
  #vk_groups{
width: 194px !important;
}



#15 Sea Wolf

Sea Wolf

    Пользователь

  • Пользователи
  • PipPip
  • 23 сообщений

Отправлено 25 Ноябрь 2014 - 22:15

Попробую

#16 Sea Wolf

Sea Wolf

    Пользователь

  • Пользователи
  • PipPip
  • 23 сообщений

Отправлено 25 Ноябрь 2014 - 22:24

Все равно, все осталось как было.

#17 Vaccina

Vaccina

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

  • Модераторы
  • 23 716 сообщений

Отправлено 27 Ноябрь 2014 - 04:25

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

#18 Сергей Наумчук

Сергей Наумчук

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 97 сообщений

Отправлено 12 Январь 2015 - 20:28

Вот что нашел по этому поводу в яндексе. Не идеально, но работает.:

" Для этого достаточно задать в стилях сайта принудительную ширину блока и фрейма виджета равную 100%. В WordPress изменения вносятся в основной стиль шаблона, который обычно расположен в каталоге шаблона и чаще всего называется style.css.


  

#vk_groups,
#vk_groups iframe {
width: 100% !important;
}
А непосредственно в коде виджета нужно указать автоматическую ширину (width: «auto»)



VK.Widgets.Group("vk_groups", {mode: 0, width: "auto", height: "400", color1: 'FFFFFF', color2: '50a9c3', color3: '50a9c3'}, Ваш_ID);"





Темы с аналогичным тегами вк, виджет

Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных