CODEWITHSUNDEEP
htmlcsstwittertwitter-button
GawecoT
GawecoT

Reputation: 23

Can't Center Twitter Follow Button and Some Text Cut Out

I'm getting some peculiar behavior on my twitter follow button. It doesn't seem to center and some text is cut out (text should be 'Follow @HackerUofT' but it only shows 'Follow'). Link http://hacker-universityoftoronto.appspot.com/ 

<center class="social_media">
    <a href="https://twitter.com/HackerUofT" class="twitter-follow-button" data-show-count="false">Follow @HackerUofT</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</center>

When I inspect element on Chrome and change the center to a div it seems to fix everything but when I actually edit the code to a div it doesn't work.

Upvotes: 2

Views: 3012

Answers (3)

CSS Guy
CSS Guy

Reputation: 1984

Add text-align cetner in social media class

.social_media
{
    text-align:center
}

http://jsfiddle.net/CsETG/

Upvotes: 0

Libin
Libin

Reputation: 2462

Got the culprit. When I inspect your code, the show-screen-name attribute was set to false.

Just add data-show-screen-name="true" to your <a href> line as shown below.

<a href="https://twitter.com/HackerUofT" class="twitter-follow-button" data-show-count="false" data-show-screen-name="true">Follow @HackerUofT</a>

Nothing else to change.

Cheers!!!

Upvotes: 0

Daniil Ryzhkov
Daniil Ryzhkov

Reputation: 7596

Don't use ceneter tag as it will be removed in html5 standarts. Use text-align. http://jsfiddle.net/6f5aL/

<div style="text-align:center">
    <a href="https://twitter.com/HackerUofT" class="twitter-follow-button" data-show-count="false">Follow @HackerUofT</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>

Upvotes: 2

Related Questions