Как сделать VK виджет адаптивным?

Здравствуйте, подскажите, как сделать виджет VK адаптимным(резиновым)? Перепробовал уже все способы из интернета ничего корректно не работает! Пробовал добавлять стили:
#vk_groups,
#vk_groups iframe {
     width: 100% !important;
}

Сам блок становится адаптивным, но миниатюры пользователей - нет! И когда изменяю размер экрана все ломается. Единственный способ, который более менее подошел этот! Но он постоянно перезагружает страницу. В общем, помогите пожалуйста.
  • Вопрос задан
  • 26400 просмотров
Пригласить эксперта
Ответы на вопрос 6
webirus
@webirus
Тыжверстальщик! Наверстай мне упущенное...
Беру код примера и объясняю.
<div id="vk_widget">
    <div id="vk_groups"></div>
</div>
<script type="text/javascript" src="//vk.com/js/api/openapi.js?116"></script>
<script>
    function VK_Widget_Init(){
        document.getElementById('vk_groups').innerHTML = "";
        var vk_width = document.getElementById('vk_widget').clientWidth;
        VK.Widgets.Group("vk_groups", {mode: 0, width: vk_width, height: "241", color1: "2B2B2B", color2: "FFFFFF", color3: "2B2B2B"}, 26292363);
    };
    window.addEventListener('load', VK_Widget_Init, false);
    window.addEventListener('resize', VK_Widget_Init, false);
</script>

Ошибка тут: width: vk_width
Сделайте width: auto
А для блоков укажите размеры 100%
#vk_widget, #vk_groups {
    width: 100%;
}

Иногда скрипт не обрабатывает auto, можно попробовать в кавычках 'auto'.
Ответ написан
Rimush
@Rimush
Мне помогло так:
<div id="vk_widget"></div>
<script type="text/javascript" src="//vk.com/js/api/openapi.js?116"></script>
<script>
    function VK_Widget_Init(){
        document.getElementById('vk_widget').innerHTML = '<div id="vk_groups"></div>';
        VK.Widgets.Group("vk_groups", {mode: 0, width: "auto", height: "241", color1: "2B2B2B", color2: "FFFFFF", color3: "2B2B2B"}, 26292363);
    };
    window.addEventListener('load', VK_Widget_Init, false);
    window.addEventListener('resize', VK_Widget_Init, false);
</script>
Ответ написан
fearrr
@fearrr
<!-- VK Widget -->
       <div id="vk_widget" style="width: 100%;"></div>
       <script type="text/javascript" src="//vk.com/js/api/openapi.js?136"></script>
       <script !src="">
             function VK_Widget_Init(){
                  var getWidth = document.getElementById("vk_widget").clientWidth;
                  console.log(getWidth);
                  document.getElementById('vk_widget').innerHTML = '<div id="vk_groups"></div>';
                  VK.Widgets.Group("vk_groups", {
                       mode: 1,
                       color2: '37474F',
                       width: getWidth,
                   }, ID_ГРУППЫ);
             };
             window.addEventListener('load', VK_Widget_Init, false);
             window.addEventListener('resize', VK_Widget_Init, false);
       </script>
Ответ написан
@john_2013
Можно и без костылей, просто пропишите width:"auto" в настройках виджета
Ответ написан
@vladimirstaroseltsev
На большом монике отображается вот так вот. Как быть?
cb0fe1b2edda40e69e642a97176936ae.PNG
Ответ написан
@WaterCory
а как сделать чтобы он был по ширине секции которая создается в elementor
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы