I am trying to embed on my site a plug-in to my Facebook Page with fully responsive behavior. Basically, I just want its width to change at different browser sizes; 480px when the browser is 480 or narrower; 250px when 481 < browser < 731, and 300px when browser is 731 or wider. 

I realize that this question [has been asked here before](https://stackoverflow.com/questions/29429296/responsive-width-facebook-page-plugin#29503539), but previous answers either no longer work thanks to FB changes, or require that the user refresh their browser window. But on [this blog post](https://www.mugo.ca/Blog/How-to-make-the-Facebook-Page-Plugin-fully-responsive) I have found an **actual example** of a fully-functioning responsive FB Page plug-in; it changes size and other characteristics on-the-fly as the browser window is resized. 

The blog post mentions the JavaScript they use, and a link to the site where you can see it in play. But they do not offer a stripped-down summary of all the CSS and HTML involved, and the code on their site is a bit complicated for my newbie eyes. I've tried adding their JavaScript to my site, but for some reason it's not working for me. As you change the browser width, my DIV #fbsection adjusts its width just fine, but the DIV .fb-page inside it will only change if you refresh. 

I made my site in Dreamweaver CS 6 using their responsive template, and it incorporates their style sheet **boilerplate.css** and JavaScript **respond.min.js**. The relevant code is as follows:

(from the HTML document)

```
    <link href="boilerplate.css" rel="stylesheet" type="text/css">
    <link href="bluedolphin.css" rel="stylesheet" type="text/css">
    <script src="respond.min.js"></script>
</head>
<body bgcolor="#FFFFFF">
       <div id="fb-root"></div>
            <script>(function(d, s, id) {
              var js, fjs = d.getElementsByTagName(s)[0];
              if (d.getElementById(id)) return;
              js = d.createElement(s); js.id = id;
              js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.10";
              fjs.parentNode.insertBefore(js, fjs);
            }(document, 'script', 'facebook-jssdk'));

        $(window).on('resize', function() {

setTimeout(function(){CMSSpace.changeFBPagePlugin()}, 500);
});

$(window).on('load', function() {
   setTimeout(function(){CMSSpace.changeFBPagePlugin()}, 1500);
});

CMSSpace.changeFBPagePlugin = function () {
   //getting parent box width
   var container_width = (Number($('.fb-column').width()) - Number($('.fb-column').css('padding-left').replace("px", ""))).toFixed(0);
   //getting parent box height
   var container_height = (Number($('.fb-column').height()) - (Number($('.fb-column-header').height()) + Number($('.fb-column-   header').css('margin-bottom').replace("px", "")) + Number(($('.fb-column').css('padding-top').replace("px", "")*2)))).toFixed(0);
   if (!isNaN(container_width) && !isNaN(container_height)) {
      $(".fb-page").attr("data-width", container_width).attr("data-height", container_height);
   }
   if (typeof FB !== 'undefined' ) {
      FB.XFBML.parse();
   }
}

            </script>

```

(also in HTML doc)

```
    <div id= "fbsection"> 
                 <h1>Facebook</h1>  
                 <p class="centered"><a href="https://www.facebook.com/pg/bluedolphinbodywork/">Like my Page</a> for the chance to be notified when I post special offers there, and please Invite your Facebook Friends, too! </p>

                     <div class="fb-page" style="max-width:300px; margin:auto;"
                         data-href="https://www.facebook.com/bluedolphinbodywork" 
                         data-tabs="timeline" 
                         data-small-header="false" 
                         data-adapt-container-width="true"
                         data-height="1000" 
                         data-width="300" 
                         data-hide-cover="false" 
                         data-show-facepile="true"> 
                            <div class="fb-xfbml-parse-ignore">
                              <blockquote cite="https://www.facebook.com/bluedolphinbodywork" class="fb-xfbml-parse-ignore">
                              <a href="https://www.facebook.com/bluedolphinbodywork">Blue Dolphin Bodywork</a>
                              </blockquote>
                            </div>
                        </div>
                  </div>

```

Relevant snips from my stylesheet **bluedolphinbodywork.css**:

```
#fbsection {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width:480px;
    vertical-align:top;
    margin-bottom:5px;
    padding-bottom:5px;
    position: relative;
}

@media only screen and (min-width: 481px) {

#fbsection {
    display:inline-block;
    max-width:250px;
    }

@media only screen and (min-width: 732px) {

#fbsection {
    max-width:300px;
}

```

What am I doing wrong?
Thanks for all replies.