Is there a way to lock the location of the small thumbs button to the bottom of the images?
The gap between the bottom of the main image and the thumbnail dots arises due to your gallery using imageVAlign="TOP" and imageScaleMode="SCALE".
Your gallery uses the default thumbsPosition="BOTTOM" so your thumbnail dots are always displayed below the image area in the gallery.
When a browser window narrows, the height of the gallery does not change, and therefore, the height of the image area does not change (and the thumbnail dots are still positioned immediately below the image area) but the size of the main image does change to respect its aspect ratio (due to setting imageScaleMode="SCALE") resulting in space below the image.
Either set imageVAlign="CENTER" to vertically center the image within the image area (to reduce the gap between the bottom of the image and the thumbnail dots) or change imageScaleMode to FILL so that the image fills the image area (which would result in a minimal gap, although images may be cropped).
Also, how do I change the color of the button? My background is set to white so the 'on' state of the button is not visible.
The thumbnail dots currently uses the navButtonIconColor for the hover and selected state and the navButtonBackColor for the unselected state.
As long as your navButtonIconColor, navButtonBackColor and gallery background color all differ, your thumbnail dots should always be visible.
Please note that we plan to introduce separate color controls for the thumbnail dots in a future version of Juicebox-Pro.