CODEWITHSUNDEEP
javascriptcsswidget
Josh Tha CreativeOne
Josh Tha CreativeOne

Reputation: 377

Twitter Widget is being distorted by css. How can I fix it

I embedded a twitter widget on my website using their embed code. But after putting it on my web page the letters are too big and the size of it is all wrong.The Letters are too big and the styling of the widget is not proportioned.

All of the styling information that is needed is actually in the javascript code. But it looks like something is overriding the styling and throwing it off.

Here is the code for the widget.

   <script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 4,
  interval: 6000,
  width: 160,
  height: 300,
  theme: {
    shell: {
      background: '#333333',
      color: '#ffffff'
    },
    tweets: {
      background: '#000000',
      color: '#b68e59',
      links: '#cccccc'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    hashtags: true,
    timestamp: true,
    avatars: false,
    behavior: 'all'
  }
}).render().setUser('BigNotch').start();
</script>

And here is the link to the page that it's on. http://notchtheguru.com

how can I fix this?

Upvotes: 1

Views: 1128

Answers (2)

Josh Tha CreativeOne
Josh Tha CreativeOne

Reputation: 377

I figured it out, so now i'm going to answer my own question :) (maybe somebody esle will run into this problem)

What I did was put the widget in a container div. I set the font on the containter div, but you don't have to set anything for the container dive at all.

Upvotes: 1

tjk
tjk

Reputation: 194

The javascript file contains CSS that affects the styling of your widget.

I recommend saving your own copy of the widget and storing it on your webserver, so you can edit the contents of it.

The font size is coming up as 18/20px, so if you find the following class and reduce the font size it should look more like what you are after - something like this:

.twtr-tweet-wrap {
    font-size: 14px; // Or whatever size you choose...
}

Upvotes: 0

Related Questions