How to change the width of the google+ comments widget - html

Question

I am attempting to adjust the width of the Google+ comment widget for the mobile device. Here is my HTML:
<div id="tabs">
<ul>
<li><img src="/images/icon-facebook.png" alt="Facebook Icon" /><p class="tabTitle">Comment on <strong class="fbBlue">Facebook</strong></p></li>
<li><img src="/images/icon-plus.png" alt="Google+ Icon" /><p class="tabTitle">Comment on <strong class="googleRed">Google+</strong></p></li>
</ul>
<div id="tabs-1">
<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/all.js#xfbml=1&appId=654528351241254";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-comments" data-href="http://www.harvekeronline.com/3dlm-lesson-your-ideal-life/" data-colorscheme="light" data-numposts="10" data-width="100%" data-order-by="reverse_time" data-mobile="200px"></div>
</div>
<div id="tabs-2">
<script src="https://apis.google.com/js/plusone.js">
</script>
**<div class="g-comments"
data-href="http://www.harvekeronline.com/3dlm-lesson-your-ideal-life/"
data-width="medium"
data-first_party_property="BLOGGER"
data-view_type="FILTERED_POSTMOD">
</div>**
</div>
</div>
It is possible that the "tabs" div is messing this up, but other then that, I have no idea.
Does anyone have any suggestions?