Styling script inside of HTML

Question

I'm trying to style a stock widget taken from: financialcontent.com . I am using Bootstrap to help style the page.

In order to place it inside of a div, I had to put the script itself inside of the HTML code I've written as shown below:

    <div class="col-md-3 col-sm-12 well">
        <script src="http://markets.financialcontent.com/stocks?Module=snapshot&Ticker=$COMP+$SPX+$DJI&Output=JS"></script>
    </div>

However, I cannot style the size of the stock which causes it to be bigger than the space I have allocated for it as shown below:

Is there any way for me to edit the size of the script? I have already considered increasing the column size, but that is not an attractive option considering other elements of the page.

Answer 1

The width is hard-coded to 300px:

document.write('<div class="fcsnapshot" style="width: 300px;">\n');

You can overwrite that with a CSS rule

.fcsnapshot { width: auto !important; }

This will likely break other styles in the widget you have to fix, but it's a starting point.