How can I make my iframe responsive so it looks good on the mobile version of my website too?

To make your iframe responsive to the size of the page where it is integrated so it adapts to mobile displays or to resized browser windows, you just need to use a percentage (%) in the "width" attribute of the iframe. Check below an example with the "width" attribute in blue.  

Example:
<iframe frameborder:"0" height="1000" id="bolwl" name="bolwl" scrolling="auto" src="http://webookapp.tts.com/Account/?AgencyId=0000&AgencyGuid=00000000-0000-0000-0000-justanexample" width="100%"></iframe>