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

Question

[MrGarik]

Здравствуйте, подскажите, как сделать виджет VK адаптимным(резиновым)? Перепробовал уже все способы из интернета ничего корректно не работает! Пробовал добавлять стили:

#vk_groups,
#vk_groups iframe {
     width: 100% !important;
}

Сам блок становится адаптивным, но миниатюры пользователей - нет! И когда изменяю размер экрана все ломается. Единственный способ, который более менее подошел этот! Но он постоянно перезагружает страницу. В общем, помогите пожалуйста.

Answer 1

[Сергей Горячев]

Беру код примера и объясняю.

<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'.

Comments

[Миша Коган]

спасибо, рабочий вариант

[DimDim7778]

Спасибо!

[Tony Ter]

Для width: auto необходимо 'auto' в кавычках, чтобы width: 'auto' было, иначе ошибка будет.

Answer 2

[Илья]

Мне помогло так:

<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>

Comments

[Diversia]

Рабочий вариант, спасибо! Остальное выше не работает!

Answer 3

[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>

Comments

[Дан]

Спасибо Вам, милый человек

Answer 4

[john_2013]

Можно и без костылей, просто пропишите width:"auto" в настройках виджета

Comments

[Chimaira]

спасибо!

[Сергей Ермилов]

Спасибо! Да в 2024 помогло

Answer 5

[vladimirstaroseltsev]

На большом монике отображается вот так вот. Как быть?

Comments

[Romua1d]

Центрировать?

Answer 6

[WaterCory]

а как сделать чтобы он был по ширине секции которая создается в elementor