Thank you for providing the URL to your web page and the screenshots.
The main problem is most likely with the dimensions of your gallery.
Your gallery has a height of 100% and, if the gallery was the only element on the page, it would fill the height of the browser window. However, your page contains a header and footer and the gallery has no parent container which has been given a height via CSS so Juicebox is unable to determine what its height should be 100% of.
Perhaps the easiest fix for this would be to set your gallery's height to be a fixed pixel value instead (such as 600px).
Also, your web page has a few HTML errors and it might help to fix these. There are not many errors but they may be non-trivial (stray and duplicate Doctype Declartations, <html>, <head> and <body> tags).
You can check the code on your web page with the W3C Markup Validation Service and fix the errors reported.
The gallery title overlapping the thumbnails images is caused by certain CSS rules in your 'style.css' file.
Lines 29-35:
body, input, select, textarea {
color: #000000;
font-family: "Raleway", Helvetica, sans-serif;
font-size: 13pt;
font-weight: 400;
line-height: 2em;
}
Lines 328-330:
textarea {
padding: 0.75em 1em;
}
These CSS rules apply to all 'textarea' tags on your page, including those within the Juicebox gallery. Juicebox has no option but to inherit such global CSS rules.
I would recommend that you apply your custom CSS rules to only those elements on your web page that require them through use of CSS selectors (ids and classes).
With a gallery of fixed height, the HTML errors on your page fixed and custom CSS applied only to non-gallery elements on your page, things should hopefully look better.