According to its developer benward the positioning of the hub frame is purely vertical (negatively positioned above the top of the page) however for some reasons we found that the webpage is forced to change its width dimensions. I have a simple fix for this bug that will prevent the Hub Iframe from exceeding a specified Parent container width size.
Prevent Hub Iframe From Causing a Horizontal Scrollbar
I am sharing the steps for blogspot blogs. The method described below is a standard procedure that applies to all platforms.
1 Go To Blogger > Template > Backup your Template
2 Click Edit HTML
3 Paste the following Style just above ]]></b:skin>
Simple Enclose your twitter Follow button Code inside the following Parent container
.twitterButtonFixmbt {position:absolute; overflow:hidden; max-width:300px;}
4 Save your template
Now enclose your twitter button code inside these Div tags
<div class="twitterButtonFixmbt ">
ADD Twitter Follow button code or Tweet button code here
</div>
That's it!
How it works?
I have enforced a maximum width of 300px and you can surely change it as per your container width. The position absolute and overflow properties along with max-width will make sure the Iframe doesn't exceed the prescribed Parent Dimensions.
Let me know if you needed any help. Peace and blessings buddies :)