How to make VK widget responsive?

Question

css

Hello, tell me how to make the VK widget adaptable (rubber)? I've tried all the ways from the Internet, nothing works correctly! Tried to add styles:

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

The block itself becomes responsive, but the user thumbnails are not! And when I change the screen size everything breaks. The only way that more or less approached this one ! But it keeps reloading the page. In general, please help.

Answer 1

I take the example code and explain.

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

The error is here: width: vk_width
Make it width: auto
And for the blocks, set the dimensions to 100%

#vk_widget, #vk_groups {
    width: 100%;
}

Sometimes the script doesn't handle auto, you can try quoting 'auto'.

Answer 2

Helped me like this:

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

Answer 3

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

Answer 4

It is possible without crutches, just write width: "auto" in the widget settings

Answer 5

On a large monitor it is displayed like this. How to be?