1
Сообщений в теме: 17
#1
Sea Wolf
-
- Пользователи
-
- 23 сообщений
Пользователь
Отправлено 21 Ноябрь 2014 - 22:02
Как сделать так, чтобы виджет вконтакте не вылазил за рамки на моб. версии сайта, везде смотрелся по размеру. Вот как выглядит сейчас
#2
Sea Wolf
-
- Пользователи
-
- 23 сообщений
Пользователь
Отправлено 22 Ноябрь 2014 - 15:09
Будут рад если ответите 
#3
RayLi
-
- Модераторы
-
- 2 864 сообщений
Активный участник
Отправлено 22 Ноябрь 2014 - 16:17
ProgressFit (22 Ноябрь 2014 - 15:09) писал:
Будут рад если ответите
Попробуйте сделать следующее:
В шаблоне 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
-
- Пользователи
-
- 23 сообщений
Пользователь
Отправлено 23 Ноябрь 2014 - 12:10
Добавил, что-то все равно не работает. Что еще можно сделать? Может я не правильно вставил?
#5
Danil
-
- Пользователи
-
- 4 645 сообщений
Активный участник
Отправлено 23 Ноябрь 2014 - 12:11
ProgressFit (23 Ноябрь 2014 - 12:10) писал:
Добавил, что-то все равно не работает. Что еще можно сделать? Может я не правильно вставил?
<div id="vk_groups" style="width: 100%;"></div>и замените на
<div id="vk_groups" style="width: 100% !important;"></div>
#6
Sea Wolf
-
- Пользователи
-
- 23 сообщений
Пользователь
Отправлено 23 Ноябрь 2014 - 12:59
В моб. версии все равно вылазиет виджет как фото.
#7
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
-
- Пользователи
-
- 23 сообщений
Пользователь
Отправлено 23 Ноябрь 2014 - 14:10
Хотелось бы, чтобы в моб. версии, на разных устройствах, виджет имел такую ширину, чтобы не заходил на другую часть сайта. Тоесть чтобы виджет менял свою ширину в зависимости от устройства, как например картинка "купить прямо сейчас" на главной странице сайта. Извиняюсь, если не правильно сформулировал.
#9
Dars
-
- Пользователи
-
- 1 410 сообщений
Активный участник
Отправлено 23 Ноябрь 2014 - 14:15
ProgressFit (23 Ноябрь 2014 - 14:10) писал:
Хотелось бы, чтобы в моб. версии, на разных устройствах, виджет имел такую ширину, чтобы не заходил на другую часть сайта. Тоесть чтобы виджет менял свою ширину в зависимости от устройства, как например картинка "купить прямо сейчас" на главной странице сайта. Извиняюсь, если не правильно сформулировал.
#10
Sea Wolf
-
- Пользователи
-
- 23 сообщений
Пользователь
Отправлено 23 Ноябрь 2014 - 14:31
Обновил, не изменилось, напишите что конкретно нужно вставить.
#11
Sea Wolf
-
- Пользователи
-
- 23 сообщений
Пользователь
Отправлено 23 Ноябрь 2014 - 14:38
Например на пк - смотриться как надо, а на планшете и мобильном - нет.
Вот как смотриться с айпеда.
Вот как смотриться с айпеда.
Прикрепленные изображения
#12
Vaccina
-
- Модераторы
-
- 24 353 сообщений
Активный участник
Отправлено 25 Ноябрь 2014 - 03:44
В style.css попробуйте прописать:
#vk_groups {
width: 100% !important;
}
#13
Sea Wolf
-
- Пользователи
-
- 23 сообщений
Пользователь
Отправлено 25 Ноябрь 2014 - 16:12
Не помогло. Куда этот виджет можно прикрепить вообще, чтобы было все нормально?
#14
Ирина345
-
- Модераторы
-
- 5 709 сообщений
Активный участник
Отправлено 25 Ноябрь 2014 - 21:54
ProgressFit (25 Ноябрь 2014 - 16:12) писал:
Не помогло. Куда этот виджет можно прикрепить вообще, чтобы было все нормально?
@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;
}
#16
Sea Wolf
-
- Пользователи
-
- 23 сообщений
Пользователь
Отправлено 25 Ноябрь 2014 - 22:24
Все равно, все осталось как было.
#17
Vaccina
-
- Модераторы
-
- 24 353 сообщений
Активный участник
Отправлено 27 Ноябрь 2014 - 04:25
сохраняйте пожалуйста изменения, чтобы мы могли далее вас консультировать, у меня данный стиль из сообщения #12 срабатывает корректно, попробуйте расположить его в самом конце файла, также после изменений не забудьте почистить кэш браузера
#18
Сергей Наумчук
-
- Пользователи
-
- 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);"
" Для этого достаточно задать в стилях сайта принудительную ширину блока и фрейма виджета равную 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 анонимных
