Ok no conflict with Twitter css etc. Now the test page is totally clean and just has Juicebox coding in it. Still loads of whitespace. Still the problem. Config.xml below ...

<juiceboxgallery

    resizeOnImport="false"
    useFlickr="false"
    cropToFit="false"
    imageScaleMode="SCALE"
    captionPosition="NONE"
    buttonBarPosition="NONE"
    backgroundColor="rgba(245,245,245,1)"
    showExpandButton="false"
    showThumbsButton="false"
    showOpenButton="false"
    showSplashPage="NEVER"

>

webpage code

<h2>Photo Gallery</h2>
<div id="juicebox-container"></div>

<!--START JUICEBOX EMBED-->
<script src="http://www.spanishhighs.co.uk/juicebox/test/jbcore/juicebox.js"></script>
<script>
  new juicebox({
      containerId : 'juicebox-container',
      baseUrl : 'http://www.spanishhighs.co.uk/juicebox/test/',
  });
  </script>
<!--END JUICEBOX EMBED-->

Now been trying to solve this for 2 days. Surely this is easy stuff to resolve?

Thanks for the head up re some of the options. I do need the 100% width and height set.

You can see the test gallery at http://www.spanishhighs.co.uk/test/test-juicebox.php

This is what I really want as it is perfect regarding responsiveness except for the large blank areas. Under any resizing of the browser window there is a large gap both above and below the main image (Chrome).

Image padding = 0
imageScaleMode - I have tried all these .... SCALE_DOWN, SCALE, FILL, STRETCH and NONE. Scale_down works best

I am not using Caption nor Button Bar. They are set to none.