0

I am trying to align a FB share button to the right in a box. The problem is the counter on the right side of the button, which makes the button wider with each character, so I can't set a proper width.

  • Removing the width values from the iframe does not help.
  • width: auto; does not help.
  • width: 135px; fits nice IF the counter is 3 digits long, but leaves a margin if it's shorter.

.share {
  display: inline-block;
  float: right;
  text-align: right;
  width: 135px;
  height: 34px;
  overflow: visible;
}
<footer>
  <iframe class='share' src='https://www.facebook.com/plugins/share_button.php?href=SOME_URL&layout=button_count&size=large&width=110&height=28' width='110' height='28' frameborder='0'></iframe>
</footer>
Nekomajin42
  • 638
  • 1
  • 6
  • 20
  • Does this answer your question? [How to apply CSS to iframe?](https://stackoverflow.com/questions/217776/how-to-apply-css-to-iframe) – Nico Haase Jan 03 '21 at 15:25
  • @NicoHaase It does not. I am aware of the JS solution (with the CORS issue). I don't want to modify the button itself, only the outer `iframe`, which is on my side. – Nekomajin42 Jan 03 '21 at 16:19

0 Answers0