I am using the Twitter Bootstrat Freelance theme (http://startbootstrap.com/templates/freelancer/) and have incorporated Own Carousel.js (http://www.owlcarousel.owlgraphic.com/demos/demos.html).

All is working well apart from whenever I click an image to view it in a modal window, it appears the wrong size - until I resize my browser window, or refresh the page, or eg press f12. It then seems to 'fix itself'.

Not sure if this is a js conflict issue or I am doing something silly (I am quite new to js). I have looked at the console and can't see any errors, I have also tried different versions of jquery and bootstrap however no difference.

I have created a jsfiddle here http://jsfiddle.net/johnny_s/34L6t/2/ If you view the jsfiddle, try click an image and once it opens in the modal window, resize the screen slightly and you will see what I mean. It somehow suddenly fixes itself.

I would appreciate any help or direction on this issue, as I am trying to create a personal project which needs to be finished quite soon :s